几乎是现实生活中的网格示例

我们现在准备从第8章重写XamlKeypad程序以使用Grid。 新版本称为KeypadGrid。 Grid的使用不仅强制构成键盘的Button元素具有相同的大小，而且还允许键盘的组件跨越单元格。
组成键盘的网格以具有HorizontalOptions和VerticalOptions设置的页面为中心。 它有五行三列，但RowDefinitions和ColumnDefinitions集合不需要显式构造，因为每个单元格都有一个“*”（星形）高度和宽度。
此外，整个Grid都有一个特定于平台的WidthRequest和HeightRequest，其宽度是高度的五分之三。 （Windows Phone的差异基于用于Button的较大字体大小。）这会导致网格中的每个单元格都是正方形：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KeypadGrid.KeypadGridPage">
    <Grid RowSpacing="2"
          ColumnSpacing="2"
          VerticalOptions="Center"
          HorizontalOptions="Center">
        <Grid.WidthRequest>
            <OnPlatform x:TypeArguments="x:Double"
                        iOS="180"
                        Android="180"
                        WinPhone="240" />
        </Grid.WidthRequest>
 
        <Grid.HeightRequest>
            <OnPlatform x:TypeArguments="x:Double"
                        iOS="300"
                        Android="300"
                        WinPhone="400" />
        </Grid.HeightRequest>
        <Grid.Resources> 
            <ResourceDictionary>
                <Style TargetType="Button">
                    <Setter Property="FontSize" Value="Large" />
                    <Setter Property="BorderWidth" Value="1" />
                </Style>
            </ResourceDictionary>
        </Grid.Resources>
        <Label x:Name="displayLabel"
               Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
               FontSize="Large"
               LineBreakMode="HeadTruncation"
               VerticalOptions="Center"
               HorizontalTextAlignment="End" />
        <Button x:Name="backspaceButton"
                Text="&#x21E6;"
                Grid.Row="0" Grid.Column="2"
                IsEnabled="False"
                Clicked="OnBackspaceButtonClicked" />
        <Button Text="7" StyleId="7"
                Grid.Row="1" Grid.Column="0"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="8" StyleId="8"
                Grid.Row="1" Grid.Column="1"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="9" StyleId="9"
                Grid.Row="1" Grid.Column="2"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="4" StyleId="4"
                Grid.Row="2" Grid.Column="0"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="5" StyleId="5"
                Grid.Row="2" Grid.Column="1"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="6" StyleId="6"
                Grid.Row="2" Grid.Column="2"
                Clicked="OnDigitButtonClicked" />
        <Button Text="1" StyleId="1"
                Grid.Row="3" Grid.Column="0"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="2" StyleId="2"
                Grid.Row="3" Grid.Column="1"
                Clicked="OnDigitButtonClicked" />
 
        <Button Text="3" StyleId="3"
                Grid.Row="3" Grid.Column="2"
                Clicked="OnDigitButtonClicked" />
        <Button Text="0" StyleId="0"
                Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"
                Clicked="OnDigitButtonClicked" />
        <Button Text="." StyleId="."
                Grid.Row="4" Grid.Column="2"
                Clicked="OnDigitButtonClicked" />
    </Grid>
</ContentPage>

Label和退格按钮占据顶行，但Label跨越两列，退格按钮位于第三列。 类似地，Grid的底行包含零按钮和小数点按钮，但零按钮跨越两列，这在计算机键盘上是典型的。
代码隐藏文件与XamlKeypad程序相同。 此外，程序在程序进入休眠状态时保存条目，然后在程序再次启动时恢复它们。 一个边框已经以隐式样式添加到Button中，因此它看起来更像iOS上的真实键盘：

您可能还记得，代码隐藏文件中的OnDigitButtonClicked处理程序使用StyleId属性将新字符附加到文本字符串。 但正如您在XAML文件中看到的那样，对于具有此事件处理程序的每个按钮，StyleId设置为与Button的Text属性相同的字符。 事件处理程序不能使用它吗？
是的，它可以。 但是假设您确定Button中的小数点没有显示得很好。您可能更喜欢使用更重且更中心的点，例如 u00B7（称为中间点）或 u22C5（数学点运算符）或 甚至 u2022（子弹）。 也许您还喜欢这些其他按钮的不同数字样式，例如以Unicode标准从 u2460开始的环绕数字集合，或者以 u2160开头的罗马数字。 您可以替换XAML文件中的Text属性，而无需触及代码隐藏文件：

StyleId是将用户界面的视觉和机制限制为标记并与代码分离的工具之一。 您将在下一章中看到更多用于构建程序的工具，其中包括Model-View-ViewModel应用程序架构。 该章还介绍了将键盘程序变为添加机器的变体。