WPF：关于GridSplitter的一些说明

最新推荐文章于 2023-08-16 17:12:05 发布
最新推荐文章于 2023-08-16 17:12:05 发布
阅读量5.3k 收藏
点赞数
文章标签： 设计 控件 Silverlight wpf

目录

 

返回目录

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>

MinSen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF之GridSplitter
09-30
WPF WPF之GridSplitter 学习WPF 使用鼠标来控制布局的大小还是不错的哦，针对普通情况和特殊情况对GridSplitter进行讲解
WPF 控件专题 GridSplitter详解
^@^lemon tea^@^
07-20 3832
WPF 控件专题 GridSplitter详解
【wpf】GridSplitter用法总结
songhuangong123的博客
10-11 1978
布局控件Grid 配合 GridSplitter 无需编写任何代码 就能实现网格大小可拖动。
WPF中的GridSplitter使用原则
最新发布
GeGe&YoYo的博客
08-16 1412
WPF中的GridSplitter使用原则
WPF的gridsplitter分割线的大型demo
02-09
自己学习WPF中Gridsplitter控件的时候写的一个例子，方便开发者理解WPF中的UI布局中父控件和子控件和控件属性VerticalAlignment和HorizontalAlignment取不同值时候，分割线的不同用法，分割线功能由用户操作来展示出...
wpf GridSplitter拖动分隔Grid源码
06-29
在Windows Presentation Foundation (WPF) 中，`GridSplitter` 是一个非常有用的控件，它允许用户通过拖动来调整`Grid`中的列或行的大小。本篇将深入探讨`GridSplitter`的使用，以及如何在VS2015环境下通过源码实现...
vs2010 wpf Grid GridSplitter 布局 分割
01-02
总的来说，`Grid`和`GridSplitter`是WPF开发中不可或缺的布局工具，它们提供了高度自定义的界面布局能力，使得开发者能够根据需求创建出各种复杂但有序的界面。通过熟练运用这两个控件，开发者可以为用户提供更加...
[WPF] 使用Grid与GridSplitter排版布局
05-08
例如，我们可以在第一列和第二列之间添加一个GridSplitter： ```xml <!-- ... Grid定义 ... --> *" /> <ColumnDefinition Width="5" /> <!-- GridSplitter宽度 --> <!-- ... 控件添加 ... --> ...
C# WPF实现SplitContainer上下左右隐藏与显示.rar
06-14
C# WPF实现SplitContainer上下左右隐藏与显示
WPF之GridSplitter浅谈
u014650759的专栏
09-06 2713
WPF中会经常用到Grid布局，而在布局中，我们有时会考虑使用可变的宽度，那么就会用到GridSplitter控件，以便实现重新分割，改变布局。而在实际使用中，我们有可能有这样的需求，GridSplitter分割布局使界面可调整大小，但同时也需要一个初始值。如果直接用的话，可能存在这样的情况，初始值设定成某个数值，剩余的为*，这样处理的缺点是拖动GridSplitter时，设置成某个数值的区域，会...
WPF编程基础入门 ——— 第三章 布局（七）布局面板Grid
m0_46334316的博客
05-30 5760
WPF布局——布局面板GridWPF——Grid布局控件Grid简单实例——按钮排列Grid简单实例——登录界面 WPF——Grid布局控件 尽管上一篇讲解的UniformGrid能够布局统一单元格，但是很多布局中需要构建单元格大小不等，具有跨越式单元格(Span Cells) 和空白列等功能。而Grid能实现上述这些功能，它是一个使用灵活、能构建复杂UI的布局控件。 Grid最简单的用法是通过设置RowDefinitions和ColumnDefinitions属性定义单元格的总数。其中，RowDefini
用Grid和GridSplitter布局和分割WPF窗口
weixin_30347335的博客
07-04 749
在C++/MFC中一般都有比较成熟的主窗口分割策略，但对于当前使用人数不多的新技术——WPF，很多技术还需要更多人加入其中，讨论一些比较实际的应用，主窗口分割就是其中比较常见的问题。本文将对此进行应用方面的探讨，并附带给出源码和截图，方便大家学习和研究。 本文附带源码可以在这里下载：WindowGridSplit.rar 下面我将通过一个实例一步步添加分...
WPF 基本容器布局
limonero
11-22 681
1、 StackPanel 可设置为水平和垂直充满容器两种，默认是垂直排列。 顺序 2、WrapPanel 可设置水平和垂直两种，会自动换行的一种布局，默认是水平排列 3、DockPanel 可指定内容内控件的位置，最后的控件默认会充满剩余的空间 4、Grid 表格类型的容器布局 ...
WPF 自定义grid spliter的 Style
farawayplace613的专栏
12-25 3082
WPF 自定义grid spliter的 Style: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
wpfdatagrid样式
糊涂一锅
06-09 581
http://www.silverlightchina.net/html/study/WPF/2011/1220/12681.html
GridSplitter 的 ResizeBehavior 属性介绍
蝈蝈俊.net
09-03 3481
我们先来看一个我们在使用 GridSplitter 时，经常可能会碰到的问题： 把一个窗体分成2部分，这两部分中间是一个GridSplitter来支持这左右两部分的宽度变动。类似下面的效果图： 中间红色就是分割线，这个分割线支持左右两部分的宽度变更，一般我们会把这个需求写成类似下面XAML文件的方式：     xmlns="http://schemas.microsoft.com
WPF教程（三十二）GridSplitter分割线
热门推荐
刺猬的优雅
11-01 3万+
在前面的章节你已经学到，使用Grid面板可以很容易的将可用空间划分成单个单元格。使用行和列的定义，又很容易控制每行或每列占据多少空间。但是，如果你想让用户来改变这些该怎么办呢？这个时候GridSplitter就出场了。 GridSplitter使用起来非常简单，把它加到Grid里的某一行或者某一列，再分配合适的空间如5个像素这样就可以了。它允许用户从左边到右边，从上到下进行拖拽，这样就改变了行或
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值