返回目录
1. ShowsPreview和PreviewStyle属性
默认情况下，GridSplitter的ShowsPreview属性是false，这样的话，当用鼠标移动GridSplitter时，GridSplitter会立即改变相邻Grid结构的大小，如果ShowsPreview为true的话，鼠标移动GridSplitter并不会直接改变Grid的内部大小，而是在移动一个虚拟分割线，但鼠标释放后，新的大小才会被应用。
http://images.cnblogs.com/cnblogs_com/mgen/201108/201108231442568862.png
当然通过PreviewStyle可以自定义这个虚拟分割线的样式，另外这个PreviewStyle的TargetType只针对Control的，因为在GridSplitter类定义上有StyleTypedPropertyAttribute：
[StyleTypedProperty(Property = "PreviewStyle",
StyleTargetType = typeof(Control))]
public class GridSplitter : Thumb
{
}
所以PreviewStyle可以这样定义：
<</span>GridSplitter Width="5" Grid.Column="1"
Background="red" HorizontalAlignment="Center"
ShowsPreview="True"
>
<</span>GridSplitter.PreviewStyle>
<</span>Style TargetType="Control">
<</span>Setter Property="Template">
<</span>Setter.Value>
<</span>ControlTemplate TargetType="Control">
<</span>Rectangle Stroke="Navy"
StrokeDashArray="2"
StrokeThickness="1"
Fill="YellowGreen"/>
</</span>ControlTemplate>
</</span>Setter.Value>
</</span>Setter>
</</span>Style>
</</span>GridSplitter.PreviewStyle>
</</span>GridSplitter>
结果：
http://images.cnblogs.com/cnblogs_com/mgen/201108/201108231442565764.png
返回目录
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跨越多行/列就可以了。
http://images.cnblogs.com/cnblogs_com/mgen/201108/201108231442572351.png
代码：
<</span>Grid>
<</span>Grid.RowDefinitions>
<</span>RowDefinition/>
<</span>RowDefinition/>
</</span>Grid.RowDefinitions>
<</span>Grid.ColumnDefinitions>
<</span>ColumnDefinition/>
<</span>ColumnDefinition Width="auto"/>
<</span>ColumnDefinition/>
</</span>Grid.ColumnDefinitions>
<</span>GridSplitter Width="5" Grid.Column="1"
Background="red" HorizontalAlignment="Center"
ShowsPreview="True"
Grid.RowSpan="2" />
<</span>Button/>
<</span>Button Grid.Column="2" Grid.Row="2"/>
</</span>Grid>
返回目录
4. GridSplitter和Grid的SharedSizeScope
http://images.cnblogs.com/cnblogs_com/mgen/201108/201108231442575665.png
通过Grid的SharedSizeScope，可以使两个Grid的行或者列保持相同的大小，连同使用GridSplitter可以轻松做出一种ListView的Detailed
View的效果。
代码：
<</span>Grid Grid.IsSharedSizeScope="True">
<</span>Grid.RowDefinitions>
<</span>RowDefinition Height="auto"/>
<</span>RowDefinition/>
</</span>Grid.RowDefinitions>
<</span>Grid>
<</span>Grid.ColumnDefinitions>
<</span>ColumnDefinition SharedSizeGroup="group" Width="auto"/>
<</span>ColumnDefinition Width="auto"/>
<</span>ColumnDefinition Width="auto"/>
</</span>Grid.ColumnDefinitions>
<</span>GridSplitter Width="5"
Grid.Column="1"
Background="red"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
ResizeDirection="Columns"/>
<</span>TextBlock Text="列1"/>
<</span>TextBlock Grid.Column="2"
Text="列2"/>
</</span>Grid>
<</span>ListBox Grid.Row="1">
<</span>ListBox.ItemTemplate>
<</span>DataTemplate>
<</span>Grid ShowGridLines="True">
<</span>Grid.ColumnDefinitions>
<</span>ColumnDefinition SharedSizeGroup="group"/>
<</span>ColumnDefinition/>
</</span>Grid.ColumnDefinitions>
<</span>TextBlock Text="{Binding}"
Margin="5"/>
<</span>TextBlock Grid.Column="1"
Text="{Binding}"
Margin="5"/>
</</span>Grid>
</</span>DataTemplate>
</</span>ListBox.ItemTemplate>
<</span>ListBox.ItemsSource>
<</span>x:Array xmlns="clr-namespace:System;assembly=mscorlib"
Type="{x:Type String}">
<</span>String>Liu
Yuan Yuan</</span>String>
<</span>String>David
Martin</</span>String>
<</span>String>Tony</</span>String>
</</span>x:Array>
</</span>ListBox.ItemsSource>
</</span>ListBox>
</</span>Grid>
返回目录
5. GridSplitter的ControlTemplate：颜色变换GridSplitter
http://images.cnblogs.com/cnblogs_com/mgen/201108/201108231442588664.png
GridSplitter继承与Thumb，后者又继承与Control。因此GridSplitter的控件样式设计和Thumb差不多，属于那种最基础的样式，比如我的这个颜色变换的GridSplitter。
http://images.cnblogs.com/cnblogs_com/mgen/201108/201108231442588074.png
代码：
<</span>Grid>
<</span>Grid.ColumnDefinitions>
<</span>ColumnDefinition Width="auto" MinWidth="100"/>
<</span>ColumnDefinition Width="auto"/>
<</span>ColumnDefinition Width="auto"/>
</</span>Grid.ColumnDefinitions>
<</span>GridSplitter Grid.Column="1"
Width="30"
>
<</span>GridSplitter.Template>
<</span>ControlTemplate TargetType="GridSplitter">
<</span>Rectangle Name="rect" Fill="YellowGreen" Stroke="Black" StrokeThickness="4"StrokeDashArray="4" />
<</span>ControlTemplate.Triggers>
<</span>EventTrigger RoutedEvent="MouseEnter">
<</span>BeginStoryboard>
<</span>Storyboard>
<</span>ColorAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="Fill.Color"
From="YellowGreen"
To="Pink"
AutoReverse="True"
RepeatBehavior="Forever"
Duration="0:0:0.5"/>
</</span>Storyboard>
</</span>BeginStoryboard>
</</span>EventTrigger>
<</span>EventTrigger RoutedEvent="MouseLeave">
<</span>BeginStoryboard>
<</span>Storyboard>
<</span>ColorAnimation Storyboard.TargetName="rect"
Storyboard.TargetProperty="Fill.Color"
Duration="0:0:0.5"/>
</</span>Storyboard>
</</span>BeginStoryboard>
</</span>EventTrigger>
</</span>ControlTemplate.Triggers>
</</span>ControlTemplate>
</</span>GridSplitter.Template>
</</span>GridSplitter>
</</span>Grid>
加载中…
(2013-01-29 10:12:36) 
