WPF布局面板-Grid网格布局

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

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

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

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

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

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

使用Grid布局：

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

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

<!--布局控件-->

 <Grid>

<!--自定义行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="2*"/>

            <RowDefinition Height="26*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="2*"/>

            <ColumnDefinition Width="15*"/>

</Grid.ColumnDefinitions>

</Grid>

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

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

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

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

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

件加入在第0行第0列。

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

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

特点：

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

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

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

常用属性：

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

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

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

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

常用方法：

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

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

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

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

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

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

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

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

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

<!--布局控件-->

    <Grid>

        <!--自定义行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="2*"/>

            <RowDefinition Height="26*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="2*"/>

            <ColumnDefinition Width="15*"/>

        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" 

Background="#FFC6E0DE">

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

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

        </Grid>

        <Grid Grid.Row="1" Grid.Column="0" >

            <Grid.RowDefinitions>

                <RowDefinition Height="1*"/>

                <RowDefinition Height="1*"/>

                <RowDefinition Height="1*"/>

.....

           </Grid.RowDefinitions>

            <Button Grid.Row="0" Content="首页"/>

            <Button Grid.Row="1" Content="分类训练"/>

            <Button Grid.Row="2" Content="实战模拟"/>

            <Button Grid.Row="3" Content="实战测试"/>

            <Button Grid.Row="4" Content="查看历史答卷"/>

            <Button Grid.Row="5" Content="试卷规则管理"/>

            <Button Grid.Row="6" Content="试题管理"/>

            <Button Grid.Row="7" Content="考试管理"/>

            <Button Grid.Row="8" Content="权限管理"/>

            <Button Grid.Row="9" Content="系统设置"/>

            <Button Grid.Row="10" Content="退出系统" Background="#FF2EA8EE"/>

        </Grid>

</Grid>

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

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

<Button Grid.Row="9" Content="系统设置"/>添加Grid.RowSpan >>>

<Button Grid.Row="10" Grid.RowSpan="16" Content="退出系统" Background="#FF2EA8EE"/>

于跨行和跨列一样，只不过将Grid.ColumnSpan换成Grid.RowSpan。

 

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

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

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

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

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

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

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

<Label Grid.Column="2" Grid.Row="2" Content="test9" 

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