Xamarin.Forms StackLayout 教程

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

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

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

在 XAML 中创建 Xamarin.FormsStackLayout。
指定 StackLayout 的方向。
控制 StackLayout 内子视图的对齐和扩展。

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

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

创建 stacklayout

剩余 9 分钟

StackLayout 是一种布局，它在一维堆栈中以水平或垂直方式组织其子级。默认情况下，StackLayout 是垂直方向。

Visual Studio
Visual Studio for Mac

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

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

重要

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

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。
在“解决方案资源管理器”的 StackLayoutTutorial 项目中，双击 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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
此代码以声明方式定义页面的用户界面，该界面由 StackLayout 中的三个 Label 实例组成。 StackLayout 将它的子元素视图（Label 实例）置于默认为垂直方向的单行中。此外，Margin 属性表示 ContentPage 中 StackLayout 的呈现位置。

注意

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

有关 StackLayout 的详细信息，请参阅 StackLayoutXamarin.Forms。

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

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

重要

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

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。
在 Solution Pad 的 StackLayoutTutorial 项目中，双击 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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
此代码以声明方式定义页面的用户界面，该界面由 StackLayout 中的三个 Label 实例组成。 StackLayout 将它的子元素视图（Label 实例）置于默认为垂直方向的单行中。此外，Margin 属性表示 ContentPage 中 StackLayout 的呈现位置。

注意

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

有关 StackLayout 的详细信息，请参阅 StackLayoutXamarin.Forms。

指定方向

剩余 6 分钟

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中，修改 StackLayout 声明，以便将子元素水平对齐，而不是垂直对齐：

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

此代码将 Orientation 属性设置为 Horizontal。

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

注意，StackLayout 中的 Label 实例现在是水平对齐，而不是垂直对齐。

在 MainPage.xaml 中，修改 StackLayout 声明，以便将子元素水平对齐，而不是垂直对齐：

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

此代码将 Orientation 属性设置为 Horizontal。

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

注意，StackLayout 中的 Label 实例现在是水平对齐，而不是垂直对齐。

控制对齐方式和扩展

剩余 4 分钟

StackLayout 中子视图的大小和位置取决于子视图 HeightRequest 和 WidthRequest 属性的值，以及 HorizontalOptions 和 VerticalOptions 属性的值。

可以将 HorizontalOptions 和 VerticalOptions 属性设置为 LayoutOptions 结构中的字段，该结构封装了两个布局首选项：

对齐方式 - 子视图的首选对齐方式，用于确定其父级布局中的位置和大小。
扩展 - 表示子视图是否应使用额外空间（如果可用）（仅由 StackLayout 使用）。

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中，修改 StackLayout 声明，为每个 Label 设置对齐方式和扩展选项：

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

此代码设置前四个 Label 实例的对齐方式首选项，以及最后四个 Label 实例的扩展首选项。 Start、Center、End 和 Fill 字段用于定义父级 StackLayout 中 Label 实例的对齐方式。 StartAndExpand、CenterAndExpand、EndAndExpand 和 FillAndExpand 字段用于定义对齐方式首选项，以及如果该视图在父级 StackLayout 内可用，是否将占用更多空间。

注意

视图的 HorizontalOptions 和 VerticalOptions 属性的默认值为 Fill。

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

StackLayout 仅遵循与 StackLayout 方向相反的子视图的对齐方式首选项。因此，垂直方向的 StackLayout 中的 Label 子视图将其 HorizontalOptions 属性设置为对齐方式字段中的其中一种：
- Start，它将 Label 置于 StackLayout 的左侧。
- Center，它将 Label 置于 StackLayout 中心。
- End，它将 Label 置于 StackLayout 的右侧。
- Fill，确保 Label 填充到 StackLayout 的宽度。
StackLayout 只能按照其方向展开子视图。因此，垂直方向的 StackLayout 可以扩展 Label 子视图，该视图将 VerticalOptions 属性设置为其中一个扩展字段。这意味着，对于垂直对齐方式，每个 Label 在 StackLayout 内占据相同的空间量。但是，只有最后一个 Label（可将 VerticalOptions 属性设置为 FillAndExpand）具有不同的大小。

重要

使用 StackLayout 中的所有空间时，扩展首选项不起作用。

在 Visual Studio 中停止应用程序。

有关对齐方式和扩展的详细信息，请参阅 Xamarin.Forms 中的布局选项。

在 MainPage.xaml 中，修改 StackLayout 声明，为每个 Label 设置对齐方式和扩展选项：

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

此代码设置前四个 Label 实例的对齐方式首选项，以及最后四个 Label 实例的扩展首选项。 Start、Center、End 和 Fill 字段用于定义父级 StackLayout 中 Label 实例的对齐方式。 StartAndExpand、CenterAndExpand、EndAndExpand 和 FillAndExpand 字段用于定义对齐方式首选项，以及如果该视图在父级 StackLayout 内可用，是否将占用更多空间。

注意

视图的 HorizontalOptions 和 VerticalOptions 属性的默认值为 Fill。

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

StackLayout 仅遵循与 StackLayout 方向相反的子视图的对齐方式首选项。因此，垂直方向的 StackLayout 中的 Label 子视图将其 HorizontalOptions 属性设置为对齐方式字段中的其中一种：
- Start，它将 Label 置于 StackLayout 的左侧。
- Center，它将 Label 置于 StackLayout 中心。
- End，它将 Label 置于 StackLayout 的右侧。
- Fill，确保 Label 填充到 StackLayout 的宽度。
StackLayout 只能按照其方向展开子视图。因此，垂直方向的 StackLayout 可以扩展 Label 子视图，该视图将 VerticalOptions 属性设置为其中一个扩展字段。这意味着，对于垂直对齐方式，每个 Label 在 StackLayout 内占据相同的空间量。但是，只有最后一个 Label（可将 VerticalOptions 属性设置为 FillAndExpand）具有不同的大小。

重要

使用 StackLayout 中的所有空间时，扩展首选项不起作用。

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

有关对齐方式和扩展的详细信息，请参阅 Xamarin.Forms 中的布局选项。

恭喜！

100% 完成！

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

在 XAML 中创建 Xamarin.FormsStackLayout。
指定 StackLayout 的方向。
控制 StackLayout 内子视图的对齐和扩展。

后续步骤

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

标签教程

通过

创建 stacklayout

指定方向

控制对齐方式和扩展

恭喜！

后续步骤

相关链接