第十七章：掌握网格（四）

网格中的对齐
“高度”属性为“自动”的网格行以与垂直StackLayout相同的方式约束该行中元素的高度。 类似地，宽度为Auto的列的工作方式与水平StackLayout非常相似。
正如您在本章前面所见，您可以设置Grid子项的HorizontalOptions和VerticalOptions属性，以将它们放置在单元格中。 这是一个名为GridAlignment的程序，它创建一个包含九个相等大小单元格的Grid，然后将六个Label元素全部放在中心单元格中，但具有不同的对齐设置：

<ContentPage xmlns=""
             xmlns:x=""
             x:Class="GridAlignment.GridAlignmentPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Text="Upper Left"
               Grid.Row="1" Grid.Column="1"
               VerticalOptions="Start"
               HorizontalOptions="Start" />

        <Label Text="Upper Right"
               Grid.Row="1" Grid.Column="1"
               VerticalOptions="Start"
               HorizontalOptions="End" />

        <Label Text="Center Left"
               Grid.Row="1" Grid.Column="1"
               VerticalOptions="Center"
               HorizontalOptions="Start" />

        <Label Text="Center Right"
               Grid.Row="1" Grid.Column="1"
               VerticalOptions="Center"
               HorizontalOptions="End" />

        <Label Text="Lower Left"
               Grid.Row="1" Grid.Column="1"
               VerticalOptions="End"
               HorizontalOptions="Start" />

        <Label Text="Lower Right"
               Grid.Row="1" Grid.Column="1"
               VerticalOptions="End"
               HorizontalOptions="End" />
    </Grid>
</ContentPage>

如您所见，一些文本重叠：

但是，如果您将手机侧向转动，则单元格会调整大小并且文本不会重叠：

虽然可以在Grid的子项上使用HorizontalOptions和VerticalOptions来设置子项的对齐方式，但不能使用Expands标志。严格地说，您实际上可以使用Expands标志，但它对Grid的子节点没有影响。 Expands标志仅影响StackLayout的子级。
通常，您已经看到为StackLayout的子项使用Expands标志的程序为布局中的环绕元素提供了额外的空间。例如，如果StackLayout的两个Label子项都将其VerticalOptions属性设置为CenterAndExpand，则所有额外空间将在为这些子项分配的StackLayout中的两个插槽之间平均分配。
在网格中，您可以通过使用“*”（星号）规范大小的单元格以及子项上的HorizontalOptions和VerticalOptions设置来执行类似的布局技巧。您甚至可以为间距目的创建空行或空列。
SpacingButtons程序同样包含三个垂直按钮和三个水平按钮。前三个按钮占据占据页面大部分的三行网格，三个水平按钮位于页面底部的三列网格中。这两个网格位于StackLayout中：

<ContentPage xmlns=""
             xmlns:x=""
             x:Class="SpacingButtons.SpacingButtonsPage">
    <StackLayout>
        <Grid VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Button Text="Button 1"
                    Grid.Row="0"
                    VerticalOptions="Center"
                    HorizontalOptions="Center" />

            <Button Text="Button 2"
                    Grid.Row="1"
                    VerticalOptions="Center"
                    HorizontalOptions="Center" />
            <Button Text="Button 3"
                    Grid.Row="2"
                    VerticalOptions="Center"
                    HorizontalOptions="Center" />
        </Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Text="Button 4"
                    Grid.Column="0"
                    HorizontalOptions="Center" />
            <Button Text="Button 5"
                    Grid.Column="1"
                    HorizontalOptions="Center" />
            <Button Text="Button 6"
                    Grid.Column="2"
                    HorizontalOptions="Center" />
        </Grid>
    </StackLayout>
</ContentPage>

第二个Grid的默认VerticalOptions值为Fill，而第一个Grid具有VerticalOptions到FillAndExpand的显式设置。 这意味着第一个Grid将占据屏幕未被第二个Grid占用的所有区域。 第一个Grid的三个RowDefinition对象将该区域划分为三个。 在每个单元格内，Button是水平和垂直居中的：

第二个Grid将其区域划分为三个等间距列，每个Button在该区域内水平居中。
尽管LayoutOptions的Expands标志可以帮助在StackLayout中平均间隔视觉对象，但是当视觉对象不是统一大小时，该技术会崩溃。 Expands选项在StackLayout的所有插槽中平均分配剩余空间，但每个插槽的总大小取决于各个可视对象的大小。 但是，Grid会为单元格平均分配空间，然后可视对象在该空间内对齐。