WPF布局面板-Grid网格布局

WPF是微软推出的基于windows的用户界面框架。

它的布局面板有五种，可以根据自己的需求不同来选择布局面板实现功能。

下面的是其中一种：Grid网格布局

Grid“网格”即可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。形

成一个个网格状的布局近似HTML中的Table。Grid它的子控件都被放到一个个定义好

的格子里。跟其他的各个Panel比较起来，它的功能最多最复杂。

使用Grid布局：

向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions

和 ColumnDefinitions元素从而定义行数列数。

<Grid>

</>

</>

</Grid>

RowDefinition 有Height（它的值又三种类型：比例：数字+*、像素：数字、

自适应（根据内容）：auto）

ColumnDefinition 有Width 它的值跟 RowDefinition 的Height一样

放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其放置所在的行和列，

它们都是以0为基准的整型值，如果没有显式设置任何行或列，Grid将会隐式地将控

件加入在第0行第0列。

由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户应用中可以具体

到某一个单元格中，所以布局起来就很精细。

特点：

可以定义任意数量的行和列，非常灵活。
行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值。
内部元素可以设置自己所在的行和列，还可以设置纵向跨几行，横向跨几列。
可以设置Children元素的对齐方向。

因为它的这些特点，使得Grid的使用场合有：

UI布局的框架设计
大量UI元素需要成行成列对齐的
UI尺寸改变时，元素需要保留固有的宽度和高度比例。（响应式）

常用属性：

-读取或设定指定FrameworkElement的附加属性的值

常用方法：

GetColumn-取得指定FrameworkElement的附加属性的值

GetColumnSpan-取得指定FrameworkElement的附加属性的值

GetRow-取得指定FrameworkElement的附加属性的值

GetRowSpan-取得指定FrameworkElement的附加属性的值

SetColumn-设置指定FrameworkElement的附加属性的值

SetColumnSpan-设置指定FrameworkElement的附加属性的值

SetRow-设置指定FrameworkElement的附加属性的值

SetRowSpan-设置指定FrameworkElement的附加属性的值

下面加入控件来展示一下效果：

<Grid>

</>

</>

<Grid ="0" ="0" ="2"

Background="#FFC6E0DE">

<TextBlock Text="学生安全教育平台" VerticalAlignment="Center"

HorizontalAlignment="Left" FontSize="20" Padding="20" Foreground="White"/>

</Grid>

.....

</>

</Grid>

上面指定了控件在Grid表格中的哪一行那一列，如果我们的某个控件跨行或者跨列如

何做呢？例如：我需要退出系统占多行，只需要在

于跨行和跨列一样，只不过将换成。

然后Grid如何将控件设置为自适应宽度和高度，或者是固定宽度或固定高度时。

水平方向自适应：HorizontalAlignment="Stretch"

左对齐：HorizontalAlignment="Left"或设置宽度

右对齐：HorizontalAlignment="Right"或设置宽度

垂直方向自适应：VerticalAlignment="Stretch"

顶部对齐:VerticalAlignment="Top"或设置高度

底部对齐:VerticalAlignment="Bottom"或设置高度

<Label ="2" ="2" Content="test9"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" Background="Aqua" />

秒客网

WPF布局面板-Grid网格布局

相关文章