GridSplitter 的 ResizeBehavior 属性介绍

我们先来看一个我们在使用 GridSplitter 时,经常可能会碰到的问题:

把一个窗体分成2部分,这两部分中间是一个GridSplitter来支持这左右两部分的宽度变动。类似下面的效果图:

中间红色就是分割线,这个分割线支持左右两部分的宽度变更,一般我们会把这个需求写成类似下面XAML文件的方式:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication_GridSplitter.Window1"
    Title="Window1" Height="100" Width="300">
    <Grid Width="Auto" Height="Auto" >
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="*"  />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions />
        <StackPanel Grid.Column="0"  Background="DarkBlue" />
        <GridSplitter Grid.Column="1"  Width="3" Background="Red" />
        <StackPanel Grid.Column="2"  Background="#FFAEA130" />
    </Grid>
</Window>

但是仅仅上面的代码,我们在拖动分割线的时候,会发现,分割线右边的尺寸发生变化了,而左边的尺寸没有发生变化,类似下面效果图:

中间出现了一个空白区域。

这是为何呢??

原因很简单, GridSplitter 默认的 ResizeBehavior 属性为:BasedOnAlignment

ResizeBehavior 属性是一个枚举类型:GridResizeBehavior ,这个枚举类型包含以下枚举项:

BasedOnAlignment    根据VerticalAlignment 和 HorizontalAlignment 属性来确定分割线移动后,有哪些项被移动
CurrentAndNext        Grid 当前所在的区域以及下一个区域被影响
PreviousAndCurrent  前一个和当前区域被影响
PreviousAndNext      前一个和后一个区域被影响

我们把这个XAML文件改成下面方式就可以左右联动了。注意,只改动了加粗,加红的这一个属性。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication_GridSplitter.Window1"
    Title="Window1" Height="100" Width="300">
    <Grid Width="Auto" Height="Auto" >
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="*"  />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions />
        <StackPanel Grid.Column="0"  Background="DarkBlue" />
        <GridSplitter Grid.Column="1"  Width="3" Background="Red"

ResizeBehavior="PreviousAndNext" />
        <StackPanel Grid.Column="2"  Background="#FFAEA130" />
    </Grid>
</Window>

改动后的效果图:

总结:

GridSplitter 的默认 ResizeBehavior 属性导致我们无法实现左右联动,我们只需要简单的修改这个属性就实现左右联动。

这个问题,由于是第一次接触WPF,让我花了好几个星期,才发现是这里简单的问题所导致的。所以特写此篇博客,希望对碰到这个问题人有所帮助。

参考资料:

MSDN GridResizeBehavior Enumeration 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1770808


你可能感兴趣的:(resize)