Xamarin.Forms 网格教程

开始演练本教程的前提条件为已成功完成以下教程：

生成第一个 Xamarin.Forms 应用快速入门。

在本教程中，你将了解如何执行以下操作：

在 XAML 中创建 Xamarin.FormsGrid。
指定 Grid 的列和行。
涉及 Grid 中多列或多行的内容。

你将使用 Visual Studio 2019 或 Visual Studio for Mac 创建一个简单的应用程序，演示如何在 Grid 中对控件布局。以下屏幕截图显示了最终的应用程序：

还将使用适用于 Xamarin.Forms 的 XAML 热重载查看 UI 更改，而无需重新生成应用程序。

创建网格

剩余 8 分钟

Grid 是一种布局，它将其子级组织为行和列，这些行和列可以具有比例或绝对大小。默认情况下，Grid 包含一行和一列。

Visual Studio
Visual Studio for Mac

若要完成本教程，应使用 Visual Studio 2019（最新版本），且安装了“使用 .NET 的移动开发”工作负载。此外，还需要一个匹配的 Mac，用于在 iOS 上生成教程应用程序。有关安装 Xamarin 平台的信息，请参阅安装 Xamarin。有关将 Visual Studio 2019 连接到 Mac 生成主机的信息，请参阅通过“与 Mac 配对”进行 Xamarin.iOS 开发。

启动 Visual Studio，新建名为 GridTutorial 的 Xamarin.Forms 空白应用。

重要

本教程中的 C# 和 XAML 片段要求将解决方案命名为 GridTutorial。使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。
在“解决方案资源管理器”的 GridTutorial 项目中，双击 MainPage.xaml 将其打开。然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码：
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
此代码以声明方式定义页面的用户界面，该界面由 Grid 中的 Label 组成。默认情况下，Grid 将其子视图放在一个单一位置。因此，包含多个子项的 Grid 应指定列和行，这将在下一个练习中进行介绍。此外，Margin 属性表示 ContentPage 中 Grid 的呈现位置。

注意

除 Margin 属性外，还可在上设置 GridPadding 属性。 Padding 属性值指定 Grid 和其子级边界之间的距离。有关详细信息，请参阅边距和填充。
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 远程模拟器或 Android Emulator 内的应用程序：

有关 Grid 的详细信息，请参阅 Xamarin.Forms 网格。

若要完成本教程，应使用 Visual Studio for Mac（最新版），且安装了 iOS 和 Android 平台支持。此外，还需要 Xcode（最新版）。有关安装 Xamarin 平台的详细信息，请参阅安装 Xamarin。

启动 Visual Studio for Mac，新建名为 GridTutorial 的 Xamarin.Forms 空白应用。

重要

本教程中的 C# 和 XAML 片段要求将解决方案命名为 GridTutorial。使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。
在 Solution Pad 的 GridTutorial 项目中，双击 MainPage.xaml 将其打开。然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码：
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
此代码以声明方式定义页面的用户界面，该界面由 Grid 中的 Label 组成。默认情况下，Grid 将其子视图放在一个单一位置。因此，包含多个子项的 Grid 应指定列和行，这将在下一个练习中进行介绍。此外，Margin 属性表示 ContentPage 中 Grid 的呈现位置。

注意

除 Margin 属性外，还可在上设置 GridPadding 属性。 Padding 属性值指定 Grid 中视图之间的距离。有关详细信息，请参阅边距和填充。
在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android 模拟器内的应用程序：

有关 Grid 的详细信息，请参阅 Xamarin.Forms 网格。

指定列和行

剩余 6 分钟

Visual Studio
Visual Studio for Mac

在“MainPage.xaml”中，修改 Grid 声明以定义列和行，并将内容置于列和行中：
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
此代码定义 Grid 的列和行，并将 Label 实例放置在特定的列和行中。列和行数据存储在 ColumnDefinitions 和 RowDefinitions 属性中，这两个属性分别是 ColumnDefinition 和 RowDefinition 对象的集合。每个 ColumnDefinition 的宽度由 ColumnDefinition.Width 属性设置，每个 RowDefinition 的高度由 RowDefinition.Height 属性设置。有效的宽度值和高度值为：
- Auto 对列或行进行大小调整以适应内容。
- 比例值，将列和行的大小设置为剩余空间的比例。以 * 结尾表示比例值。
- 绝对值，使用特定的固定值调整列或行的大小。
因此，在上面的代码中，每列的宽度为 Grid 的一半，而每行的高度为 50 个与设备无关的单位。

使用从零开始的索引，借助和 Grid.Row 附加属性指定 Grid.ColumnGrid 中每个 Label 的位置。因此，第一列是第 0 列，第一行是第 0 行。第一个 Label 缺少这些附加属性，因为任何未设置这些属性的子视图将自动在第 0 列第 0 行中呈现。

注意

可以使用 ColumnSpacing 和 RowSpacing 属性设置 Grid 中列和行之间的间距。有关详细信息，请参阅 Xamarin.Forms 网格指南中的间距。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序：

在“MainPage.xaml”中，修改 Grid 声明以定义列和行，并将内容置于列和行中：
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
此代码定义 Grid 的列和行，并将 Label 实例放置在特定的列和行中。列和行数据存储在 ColumnDefinitions 和 RowDefinitions 属性中，这两个属性分别是 ColumnDefinition 和 RowDefinition 对象的集合。每个 ColumnDefinition 的宽度由 ColumnDefinition.Width 属性设置，每个 RowDefinition 的高度由 RowDefinition.Height 属性设置。有效的宽度值和高度值为：
- Auto 对列或行进行大小调整以适应内容。
- 比例值，将列和行的大小设置为剩余空间的比例。以 * 结尾表示比例值。
- 绝对值，使用特定的固定值调整列或行的大小。
因此，在上面的代码中，每列的宽度为 Grid 的一半，而每行的高度为 50 个与设备无关的单位。

使用从零开始的索引，借助和 Grid.Row 附加属性指定 Grid.ColumnGrid 中每个 Label 的位置。因此，第一列是第 0 列，第一行是第 0 行。第一个 Label 缺少这些附加属性，因为任何未设置这些属性的子视图将自动在第 0 列第 0 行中呈现。

注意

可以使用 ColumnSpacing 和 RowSpacing 属性设置 Grid 中列和行之间的间距。有关详细信息，请参阅 Xamarin.Forms 网格指南中的间距。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序：

跨越多列或多行

剩余 2 分钟

Visual Studio
Visual Studio for Mac

在“MainPage.xaml”中，修改 Grid 声明以定义列和行，并放置跨越列和行的内容：

<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>

此代码定义 Grid 的列和行，并将 Label 实例放置在特定的列和行中。第一个 Label 设置 ColumnSpan 附加属性，使其文本跨越多列。将 ColumnSpan 属性设置为 2，代表着 Label 将跨越的列数。第二个 Label 设置 RowSpan 附加属性，使其文本跨越多行。将 RowSpan 属性设置为 2，代表着 Label 将跨越的行数。

如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 远程模拟器或 Android Emulator 内的应用程序：

在 Visual Studio 中停止应用程序。

有关跨越列和行的详细信息，请参阅 Xamarin.Forms 网格指南中的行和列。

在“MainPage.xaml”中，修改 Grid 声明以定义列和行，并放置跨越列和行的内容：

<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>

此代码定义 Grid 的列和行，并将 Label 实例放置在特定的列和行中。第一个 Label 设置 ColumnSpan 附加属性，使其文本跨越多列。将 ColumnSpan 属性设置为 2，代表着 Label 将跨越的列数。第二个 Label 设置 RowSpan 附加属性，使其文本跨越多行。将 RowSpan 属性设置为 2，代表着 Label 将跨越的行数。

如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序：

在 Visual Studio for Mac 中停止应用程序。

有关跨越列和行的详细信息，请参阅 Xamarin.Forms 网格指南中的行和列。

恭喜！

100% 完成！

祝贺你完成了本教程的学习，在本教程中你学习了如何：

在 XAML 中创建 Xamarin.FormsGrid。
指定 Grid 的列和行。
涉及 Grid 中多列或多行的内容。

后续步骤

若要深入了解使用 Xamarin.Forms 创建移动应用程序的基础知识，请继续学习 CollectionView 教程。

ListView 教程

创建网格

指定列和行

跨越多列或多行

恭喜！

后续步骤

相关链接