需求:界面由多部分控件组成,想要拖拽控件之间的分隔栏以改变尺寸。

MainWindow.xaml:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions> <ListBox Grid.Row="0" Grid.Column="0">
<ListBoxItem>aaaa</ListBoxItem>
<ListBoxItem>bbbb</ListBoxItem>
<ListBoxItem>cccb</ListBoxItem>
</ListBox> <TextBlock Grid.Row="0" Grid.Column="1">sadfas</TextBlock> <GridSplitter Grid.Row="0" Grid.Column="0" Width="0" VerticalAlignment="Stretch" HorizontalAlignment="Right"/> </Grid>

运行效果如下:

红色虚线表示了拖动分隔栏以改变控件的尺寸边缘。

坑点:

  • 必须使用Grid及其行和列来定义,否则能显示但无法拖动。例如下面的写法是无效的:
<StackPanel Orientation="Horizontal">
<TextBlock Text="LLLLLLLLLLLLLL"/>
<GridSplitter Width="10" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="Wheat"/>
<TextBlock Text="RRRRRRRRRRRRRR"/>
</StackPanel>
  • 对于左右分割列,必须指定分隔栏GridSplitter的宽度Width,以及设置VerticalAlignment,否则无效。
  • 对于上下分割行,必须指定分隔栏GridSplitter的高度Height,以及设置HorizontalAlignment,否则无效。

再来一个详细一点的例子:

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="1000"> <Grid>
<Grid.RowDefinitions/>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="10"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="LLLLLLLLLLLLLL"/>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="10" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="Wheat"/> <Grid Grid.Row="0" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="10"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions> <TextBlock Grid.Row="0" Grid.Column="0" Text="RRRRRRTTTTTTTT"/>
<GridSplitter Grid.Row="1" Grid.Column="0" Height="10" HorizontalAlignment="Stretch" Background="Wheat"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="RRRRRRBBBBBBBB"/> </Grid>
</Grid> </Window>

运行效果如图:下面的水平和垂直的黄色分隔栏都是可以拖动的。

重要的参考:

【C#/WPF】GridSplitter 分割布局,拖拽控件分隔栏以改变控件尺寸的更多相关文章

  1. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  2. 拼图 canvas分割 dom拖拽 pc 移动端

    参考:Canvas drag 实现拖拽拼图小游戏 参考的案例,不支持手机端.总结下实现过程中遇到的小坑. gitHub:https://github.com/WppFrontEnd/puzzle 大概 ...

  3. WPF之快速实现拖拽功能

    场景:工具栏上有很多图标(一个图标代表一种控件),可以左键按下图标,然后拖拽到设计区域创建一个个的控件. 实现:1.给工具栏上的图标添加MouseLeftDown和MouseMove事件,前者事件是为 ...

  4. dragView 屏幕拖拽并且弹出菜单的控件

    dragView 因项目新需求需要添加一个屏幕拖拽按钮可以弹出菜单的控件,因为不是我做的闲来无事写一个demo吧 可能存在一些小bug(毕竟就写了几个小时)兄弟姐妹们理解思路就行 具体的可以自己调试一 ...

  5. EasyUI, Dialog 在框架页(ifrmae)的Top页面弹出时,拖拽Dialog边缘(以改变窗口大小),UI界面被卡死的解决办法

    将Dialog的modal属性设置为true,可以解决卡死的问题(但会给用户使用体验带来影响) var par = { title: This.title, width: This.width, he ...

  6. WPF 快速制作可拖拽的对象和窗体

    引用类库: 1.Microsoft.Expression.Interactions 2.System.Windows.Interactivity <Window x:Class="Wp ...

  7. WPF中元素拖拽的两个实例

    今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...

  8. WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持(WmNCHitTest)、自定义最大化位置和大小(WmGetMinMaxInfo)

    无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...

  9. 【WPF】拖拽ListBox中的Item

    整理了两个关于WPF拖拽ListBox中的Item的功能.项目地址 https://github.com/Guxin233/WPF-DragItemInListBox 需求一: 两个ListBox,拖 ...

随机推荐

  1. Intellij IDEA 设置代码着色

    从visual studio到Eclipse再到Intllij IDEA,其实每个编译器都有自己的风格,但是就美观上来说,个人觉得还是visual studio的代码着色比较美观,exlipse次之, ...

  2. 【微信小程序】:confirm(删除提示)

    微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wxml: <a class="reply" wx:if="{{c ...

  3. 原创:【微信小程序】发送消息模板教程(后台以PHP示例)

    1.本教程对外开放,未经博主同意,禁止转载. 2.准备材料:1)公众号|小程序,添加选择的模板消息,2)在设置>开发设置页面,开通消息模板功能:如: 3.因为调用微信发送模板的接口是:https ...

  4. 戴尔大力宣传Ubuntu 对比与Windows的差异

    2010-06-18 10:58:36   11175 人阅读   作者:萧萧 编辑:萧萧[爆料]  评论(46)   戴尔近日上线了一个新的网页,对比Linux开源系统(主要是Ubuntu)与Win ...

  5. 用Python实现BP神经网络(附代码)

    用Python实现出来的机器学习算法都是什么样子呢? 前两期线性回归及逻辑回归项目已发布(见文末链接),今天来讲讲BP神经网络. BP神经网络 全部代码 https://github.com/lawl ...

  6. CocoaPods的ruby问题 Error fetching http://ruby.taobao.org/:

    今天安装了一个CocoaPods,在安装淘宝ruby是遇到了问题 bogon:~ zhch$ gem sources -a http://ruby.taobao.org/ Error fetching ...

  7. RMAN兼容性列表

    Target/Auxiliary Database RMAN Executable Catalog Database Catalog Schema 8.1.7.4 8.1.7.4 >=8.1.7 ...

  8. Linux内核同步 - Read/Write spin lock

    一.为何会有rw spin lock? 在有了强大的spin lock之后,为何还会有rw spin lock呢?无他,仅仅是为了增加内核的并发,从而增加性能而已.spin lock严格的限制只有一个 ...

  9. Spring boot处理OPTIONS请求

    一.现象从fetch说起,用fetch构造一个POST请求. fetch('http://127.0.0.1:8000/api/login', { method: "POST", ...

  10. php 第三方DB库NOTORM

    百度NOTORM找到该库的官网 :http://www.notorm.com/ 打开E:\AppServ\php7\php.ini 找到extension=php_pdo_mysql.dll 解开前面 ...