WPF 布局管理器之 Grid、GridSplit、UniformGrid （7）

以你之姓@ 2022-01-12 15:09 583阅读 0赞

1、Grid

Grid是以表格形式组织控件的一种布局方式，与Java AWT中的GridLayout类似，但区别在于

· WPF中的Grid的每一个单元格中可以放置多个控件，但控件可能会层叠在一起

· WPF中的Grid支持单元格的合并，类似于HTML中的table td中的rowspan和colspan

· Grid中的行和列可以自定义高度（Height）和宽度（Width）  
 在设置高度和宽度时可以采用两种写法：  
1）Height=”60”：不加“星号”表示固定的高度  
2）Height=”60\*”：加“星号”表示“加权”的高度，在调整窗体大小时，此高度或宽度会按窗体大小改变的比例进行缩放

如：

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="60" />

<RowDefinition Height="202\*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Button Grid.Column="0" Grid.Row="0" Height="30" VerticalAlignment="Top">ButtonA</Button>

<Button Grid.Column="0" Grid.Row="0" Height="30" VerticalAlignment="Bottom">ButtonB</Button>

<Button Grid.Column="1" Grid.Row="0">ButtonC</Button>

<Button Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">ButtonD</Button>

</Grid>

2、使用GridSplit分割

可以使用GridSplit控件结合Grid控件实现类似于Windows应用程序中SplitContainer的功能，如下面的应用程序：要实现以下的功能

ButtonA和ButtonB、ButtonC组成的整体，可以左右拖动，改变两者的宽度

·ButtonB和ButtonC可以上下拖动，改变两者的高度

实现以上功能的XAML代码如下：

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="88\*" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="190\*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="172\*" />

<RowDefinition Height="Auto" />

<RowDefinition Height="90\*" />

</Grid.RowDefinitions>

<Button Content="ButtonA" Margin="3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" />

<Button Content="ButtonB" Margin="3" Grid.Row="0" Grid.Column="2" />

<Button Content="ButtonC" Margin="3" Grid.Row="2" Grid.Column="2" />

<GridSplitter Width="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"></GridSplitter>

<GridSplitter Height="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

Grid.Row="1" Grid.Column="2"></GridSplitter>

</Grid>

其核心想法为：

· 定义3\*3的表格，其中放置分割线的列（下标为1）和行（下标为1）的宽度和高度设置为Auto

· ButtonA放置在Row=0、Column=0、RowSpan＝3的单元格中

· ButtonB放置在Row=0、Column=2的单元格中

· ButtonC放置在Row=2、Column=2的单元格中

· 竖直分割线放置在Row=0、Column=1、ColSpan＝3的单元格中

· 水平分割线放置在Row=1、Column=2的单元格中

3、UniformGrid

UniformGrid 控件为控件提供了一种简化的网格布局。当控件添加到 UniformGrid 时，它们会排列在一个网格模式中，该网格模式会自动调整以使控件之间的距离保持均匀。单元格的数目将进行调整，以适应控件的数目。

在使用UniformGrid的时候：

· 各单元格的大小完全相同

· 单元格的数量取决于放入的控件的数量，且单元格一定是行、列数相同的，即1\*1、2\*2、3\*3、4\*4…的单元格分布

转载于:https://blog.51cto.com/studybao/1135495

发表评论取消回复

表情：

评论列表（有 0 条评论，583人围观）

还没有评论，来说两句吧...

相关阅读

相关 7、QI基础——布局管理器

所谓 GUI 界面，归根结底，就是一堆组件的叠加。我们创建一个窗口，把按钮放上面，把图标放上面，这样就成了一个界面。在放置时，组件的位置尤其重要。我们必须要指定组件放在

太过爱你忘了你带给我的痛/ 2023年01月13日 05:59/ 0 赞/ 148 阅读

相关 WPF 之布局

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

左手的ㄟ右手/ 2023年01月05日 12:17/ 0 赞/ 187 阅读

相关 GUI：AWT之布局管理器

布局管理器 1. 流式布局 2. 东西南北中 3. 表格布局流式布局示例代码： import java.awt.; //1.流式布局

绝地灬酷狼/ 2022年11月10日 10:45/ 0 赞/ 230 阅读

相关 java Swing布局管理器之CardLayout布局

CardLayout布局: CardLayout布局管理器能够帮助用户处理两个以至更多的成员共享同一显示空间,它把容器分成许多层,每层的显示空间占据整个容器的大小,但是每层

约定不等于承诺〃/ 2022年08月22日 00:13/ 0 赞/ 243 阅读

相关 java Swing布局管理器之BorderLayout布局

BorderLayout边界布局管理器把容器的的布局分为五个位置：CENTER、EAST、WEST、NORTH、SOUTH。依次对应为：上北（NORTH）、下南（SOUTH）、

逃离我推掉我的手/ 2022年08月22日 00:13/ 0 赞/ 269 阅读

相关 java Swing布局管理器之FlowLayout布局

[Java][]虽然可以以像素为单位对组件进行精确的定位，但是其在不同的系统中将会有一定的显示差异，使得显示效果不尽相同，为此java提供了布局管理器，以使编写的图形界面具有良

矫情吗；*/ 2022年08月22日 00:10/ 0 赞/ 276 阅读

相关 javaSwing布局管理器之TableLayout

代码来自这个地址： [http://www.clearthought.info/sun/products/jfc/tsc/articles/tablelayout/Simp

我不是女神ヾ/ 2022年06月16日 07:29/ 0 赞/ 251 阅读

相关 GUI之布局管理器（二）

上篇我们已经介绍了FlowLayout 、BordLayout、CardLayout、GridLayout等四种布局管理器，本篇我们继续补充其它几种布局管理器。 > 五、Gr

「爱情、让人受尽委屈。」/ 2022年05月15日 08:50/ 0 赞/ 240 阅读

相关 GUI之布局管理器（一）

在图形用户界面设计（GUI）过程中，我们经常会用到布局管理器，那么常用的布局管理器有哪些呢？它们又具有什么特征呢？ > 一、FlowLayout（流式布局） 1、特点：

爱被打了一巴掌/ 2022年05月15日 08:37/ 0 赞/ 479 阅读

相关 WPF 布局管理器之 Grid、GridSplit、UniformGrid （7）

1、Grid Grid是以表格形式组织控件的一种布局方式，与Java AWT中的GridLayout类似，但区别在于 · WPF中的Grid的每一个单元格中可以放置多个控件

以你之姓@/ 2022年01月12日 15:09/ 0 赞/ 584 阅读