WPF:关于GridSplitter的一些说明

目录

 

返回目录

1. ShowsPreview和PreviewStyle属性

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

image

 

当然通过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>

 

结果:

image

 

 

返回目录

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跨越多行/列就可以了。

image

代码:

<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

 

image

通过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

image

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

image

 

代码:

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值