WPF：关于GridSplitter的一些说明

最新推荐文章于 2023-05-21 07:45:13 发布
最新推荐文章于 2023-05-21 07:45:13 发布
阅读量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详解
^@^lemon tea^@^
07-20 3831
WPF 控件专题 GridSplitter详解
WPF之GridSplitter浅谈
u014650759的专栏
09-06 2713
WPF中会经常用到Grid布局，而在布局中，我们有时会考虑使用可变的宽度，那么就会用到GridSplitter控件，以便实现重新分割，改变布局。而在实际使用中，我们有可能有这样的需求，GridSplitter分割布局使界面可调整大小，但同时也需要一个初始值。如果直接用的话，可能存在这样的情况，初始值设定成某个数值，剩余的为*，这样处理的缺点是拖动GridSplitter时，设置成某个数值的区域，会...
WPF 基本容器布局
limonero
11-22 681
1、 StackPanel 可设置为水平和垂直充满容器两种，默认是垂直排列。 顺序 2、WrapPanel 可设置水平和垂直两种，会自动换行的一种布局，默认是水平排列 3、DockPanel 可指定内容内控件的位置，最后的控件默认会充满剩余的空间 4、Grid 表格类型的容器布局 ...
用Grid和GridSplitter布局和分割WPF窗口
weixin_30347335的博客
07-04 749
在C++/MFC中一般都有比较成熟的主窗口分割策略，但对于当前使用人数不多的新技术——WPF，很多技术还需要更多人加入其中，讨论一些比较实际的应用，主窗口分割就是其中比较常见的问题。本文将对此进行应用方面的探讨，并附带给出源码和截图，方便大家学习和研究。 本文附带源码可以在这里下载：WindowGridSplit.rar 下面我将通过一个实例一步步添加分...
gridview横向滑动
安卓学习乐园
07-12 1221
1.GridView简介 GridView是ViewGroup子类，主要用于显示在一个二维可滚动的网格，比如九宫格。使用gridview和listview类似，都是使用ListAdapter来填充数据加载布局。 2.XML Attributes (1).android:columnWidth 主要用来指定每一列的宽度，使用该属性时应该注意和后面的拉伸模式相关联。如果拉伸模式
WPF的gridsplitter分割线的大型demo
02-09
自己学习WPF中Gridsplitter控件的时候写的一个例子，方便开发者理解WPF中的UI布局中父控件和子控件和控件属性VerticalAlignment和HorizontalAlignment取不同值时候，分割线的不同用法，分割线功能由用户操作来展示出...
WPF之GridSplitter
09-30
在WPF（Windows Presentation Foundation）中，GridSplitter是一个非常有用的控件，它允许用户通过鼠标操作动态调整Grid布局中的列或行的大小。在本文中，我们将深入探讨GridSplitter的工作原理，以及如何在不同情况...
wpf GridSplitter拖动分隔Grid源码
06-29
在Windows Presentation Foundation (WPF) 中，`GridSplitter` 是一个非常有用的控件，它允许用户通过拖动来调整`Grid`中的列或行的大小。本篇将深入探讨`GridSplitter`的使用，以及如何在VS2015环境下通过源码实现...
vs2010 wpf Grid GridSplitter 布局 分割
01-02
总的来说，`Grid`和`GridSplitter`是WPF开发中不可或缺的布局工具，它们提供了高度自定义的界面布局能力，使得开发者能够根据需求创建出各种复杂但有序的界面。通过熟练运用这两个控件，开发者可以为用户提供更加...
WPF ListView 选择和鼠标移上去行背景颜色的去除与更改
09-17
针对WPF中ListView的基础样式进行模板重写，可以选择去除ListView的背景颜色或添加自己想要的选中时或者鼠标移上去选择项的背景颜色
[WPF] 使用Grid与GridSplitter排版布局
05-08
例如，我们可以在第一列和第二列之间添加一个GridSplitter： ```xml <!-- ... Grid定义 ... --> *" /> <ColumnDefinition Width="5" /> <!-- GridSplitter宽度 --> <!-- ... 控件添加 ... --> ...
WPF 入门笔记 - 01 - 入门基础以及常用布局
最新发布
Gefangenes的博客
05-21 4064
不管是WinForm应用程序还是WPF应用程序，实际上都是一个进程，一个进程可以包含多个线程，其中有一个是主线程，其余的是子线程。具体如下图，要实现控件 0 的布局, 那么先要实现 0 的子控件 01,02... 的布局, 要实现 01 的布局, 那么得实现 01 的子控件 001,002... 的布局, 如此循环直到子控件的布局完成后, 再完成父控件的布局, 最后递归回去直到递归结束, 这样整个布局过程就完成了。是最基本的面板，只是一个存储控件的容器，它不会自动调整内部元素的排列及大小。
WPF 面板布局常用方法
weixin_43680751的博客
04-19 1209
WPF 面板布局的常用方法
WPF高级教程（五）专题：Grid
白话屋
02-26 1264
前言 Grid是WPF中最强大的布局容器，值得我们专门使用一个专题来了解Grid的使用。 使用 行列定义 <Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDe...
WPF中Grid（网格）的GridSplitter（网格分割）
zbbfb2001的博客
05-10 2457
如果在WPF中的Grid中加入GridSplitter（网格分割条），以下是最佳实践。分配整个一行或者一列给分割条，并把行高或者列宽设置为Auto使用Grid.RowSpan或者Grid.ColumnSpan以让它撑满这个网格的全高或者全宽为了使分割条看得更能清楚设定它的宽度或者高度为一些足以看到的值，例如5设置这个GridSplitter的Background属性为更显眼的颜色设置这个GridS...
GridSplitter 自定义样式
LG20160302的博客
03-02 1660
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值