Grid表格布局

33-布局控件-Grid表格布局

Grid 控件可以把页面分成多行多列的效果，然后可以分别设置不同的控件到不同的单元格里面。

网格布局Grid

网格布局 Grid 是一个类似于 Html 的 Table 的标签，它定义了一个表格，然后设置表格里面的行和列。在 HTML 的 Table 里面根据 tr 和 td 表示行和列，而 Grid 是通过附加属性 Grid.Row、Grid.Column、Grid.RowSpan、Grid.ColumnSpan 来决定列和行的位置。

1. RowDefinitions 和 ColumnDefinitions

这两个属性主要用来指定 Grid 控件的行数和列数。内部嵌套几个 Definition 就代表这个 Grid 有几行几列。

2. Grid.Row 和 Grid.Column

当使用其他控件内置于 Grid 中时，需要使用 Grid.Row 和 Grid.Column 来指定它所在的行和列。

3. RowDefinitions 中的 Height 和 ColumnDefinitions 中的 Width

如果这两个 Height 和 Width 设置了绝对的像素值，则表示当前的行和列是固定的高度和宽度；如果设置了 Auto，则表示高度自动适应，这种情况下，Grid 的高度和宽度便随着内部内容大小而自动改变。

如果设置为 ，比如 Height=”” 则表示是占据剩余部分；如果 * 前面带有数字，比如 Height=”3*” 则表示按比例进行分配。比如创建一个 Grid 有两行，第一行占 2/5，第二行占 3/5，就可以使用下面代码来实现。

4. Grid.RowSpan 和 Grid.ColumnSpan

表示跨列。

练一练

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="2*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button
        Grid.Row="0"
        Grid.Column="0"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">1</Button>
    <Rectangle
        Grid.Row="1"
        Grid.Column="1"
        Fill="Black"/>
    <Image
        Grid.Row="2"
        Grid.Column="2"
        Source="images/093007omy75nd2azzy7w2y.png"/>
</Grid>Code language: HTML, XML (xml)