WPF：关于GridSplitter的一些说明

目录

• 1. ShowsPreview和PreviewStyle属性
• 2. ResizeBehavior属性
• 3. 跨行/列的GridSplitter
• 4. GridSplitter和Grid的SharedSizeScope
• 5. GridSplitter的ControlTemplate：颜色变换GridSplitter

 

返回目录

1. ShowsPreview和PreviewStyle属性

默认情况下，GridSplitter的ShowsPreview属性是false，这样的话，当用鼠标移动GridSplitter时，GridSplitter会立即改变相邻Grid结构的大小，如果ShowsPreview为true的话，鼠标移动GridSplitter并不会直接改变Grid的内部大小，而是在移动一个虚拟分割线，但鼠标释放后，新的大小才会被应用。

 

当然通过PreviewStyle可以自定义这个虚拟分割线的样式，另外这个PreviewStyle的TargetType只针对Control的，因为在GridSplitter类定义上有StyleTypedPropertyAttribute：

[StyleTypedProperty(Property = "PreviewStyle", StyleTargetType = typeof(Control))]

public class GridSplitter : Thumb

{ }

 

所以PreviewStyle可以这样定义：

        <GridSplitter Width="5" Grid.Column="1"

                     Background="red" HorizontalAlignment="Center"

                     ShowsPreview="True"

                      >

            <GridSplitter.PreviewStyle>

                <Style TargetType="Control">

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="Control">

                                <Rectangle Stroke="Navy"

                                          StrokeDashArray="2"

                                          StrokeThickness="1"

                                          Fill="YellowGreen"/>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </GridSplitter.PreviewStyle>

        </GridSplitter>

 

结果：

 

 

 

 

 

返回目录

2. ResizeBehavior属性

ResizeBehavior属性默认是GridResizeBehavior.BasedOnAlignment。这个枚举值，简而言之：如果HorizontalAlignment或VerticalAlignment是Center或者Stretch的话，GridSplitter的移动会改变相邻两个区域块（这里的相邻，如果GridSplitter是横向的话，是指上下两个区域。如果GridSplitter是纵向的话，是指左右两块区域，其中VerticalAlignment控制纵向，HorizontalAlignment控制横向）。如果是HorizontalAlignment或VerticalAlignment的其他值，则GridSplitter的移动会改变当前区域和相邻的一个区域的大小。具体相邻的哪个区域，跟Alignment值对应。

当然GridResizeBehavior的其他值：CurrentAndNext，PreviousAndCurrent，PreviousAndNext。可以直接控制需要改变大小的两个区域。

不过在一般情况下，我们只需要保留ResizeBehavior的默认值，并设置GridSplitter的对其为Stretch或Center就可以完成普通需求了。或者将相邻区域块的大小设置为GridLength.Auto。

 

 

注意FrameworkElement的HorizontalAlignment和VerticalAlignment默认是Stretch，但是GridSplitter的HorizontalAlignment被改写为Right。

（也可以参考MSDN更详细的解释：http://msdn.microsoft.com/zh-cn/library/system.windows.controls.gridresizebehavior.aspx）

 

 

 

 

返回目录

3. 跨行/列的GridSplitter

对于多行/列的Grid用到GridSplitter，只需要用Grid.RowSpan或ColumnSpan附加属性来使GridSplitter跨越多行/列就可以了。

代码：

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition Width="auto"/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <GridSplitter Width="5" Grid.Column="1"

                     Background="red" HorizontalAlignment="Center"

                     ShowsPreview="True"

                     Grid.RowSpan="2" />

        <Button/>

        <Button Grid.Column="2" Grid.Row="2"/>

    </Grid>

 

 

 

 

返回目录

4. GridSplitter和Grid的SharedSizeScope

 

通过Grid的SharedSizeScope，可以使两个Grid的行或者列保持相同的大小，连同使用GridSplitter可以轻松做出一种ListView的Detailed View的效果。

代码：

    <Grid Grid.IsSharedSizeScope="True">

        <Grid.RowDefinitions>

            <RowDefinition Height="auto"/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition SharedSizeGroup="group" Width="auto"/>

                <ColumnDefinition Width="auto"/>

                <ColumnDefinition Width="auto"/>

            </Grid.ColumnDefinitions>

           

            <GridSplitter Width="5"

                         Grid.Column="1"

                         Background="red"

                         HorizontalAlignment="Center"

                         VerticalAlignment="Stretch"

                         ResizeDirection="Columns"/>

           

            <TextBlock Text="列1"/>

            <TextBlock Grid.Column="2"

                      Text="列2"/>

        </Grid>

 

        <ListBox Grid.Row="1">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Grid ShowGridLines="True">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition SharedSizeGroup="group"/>

                            <ColumnDefinition/>

                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{Binding}"

                                  Margin="5"/>

                        <TextBlock Grid.Column="1"

                                  Text="{Binding}"

                                  Margin="5"/>

                    </Grid>

                </DataTemplate>

            </ListBox.ItemTemplate>

 

            <ListBox.ItemsSource>

                <x:Array xmlns="clr-namespace:System;assembly=mscorlib"

                        Type="{x:Type String}">

                    <String>Liu Yuan Yuan</String>

                    <String>David Martin</String>

                    <String>Tony</String>

                </x:Array>

            </ListBox.ItemsSource>

        </ListBox>

    </Grid>

 

 

 

返回目录

5. GridSplitter的ControlTemplate：颜色变换GridSplitter

GridSplitter继承与Thumb，后者又继承与Control。因此GridSplitter的控件样式设计和Thumb差不多，属于那种最基础的样式，比如我的这个颜色变换的GridSplitter。

 

代码：

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="auto" MinWidth="100"/>

            <ColumnDefinition Width="auto"/>

            <ColumnDefinition Width="auto"/>

        </Grid.ColumnDefinitions>

        <GridSplitter Grid.Column="1"

                     Width="30"

                      >

            <GridSplitter.Template>

                <ControlTemplate TargetType="GridSplitter">

                    <Rectangle Name="rect" Fill="YellowGreen" Stroke="Black" StrokeThickness="4" StrokeDashArray="4" />

                    <ControlTemplate.Triggers>

                        <EventTrigger RoutedEvent="MouseEnter">

                            <BeginStoryboard>

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName="rect"

                                                   Storyboard.TargetProperty="Fill.Color"

                                                   From="YellowGreen"

                                                   To="Pink"

                                                   AutoReverse="True"

                                                   RepeatBehavior="Forever"

                                                   Duration="0:0:0.5"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseLeave">

                            <BeginStoryboard>

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName="rect"

                                                   Storyboard.TargetProperty="Fill.Color"

                                                   Duration="0:0:0.5"/>

                                </Storyboard>

                            </BeginStoryboard>

                        </EventTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </GridSplitter.Template>

        </GridSplitter>

    </Grid>