目录
- 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"
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更详细的解释：@L_502_9@）
返回目录
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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。