Xamarin.Forms 标签教程

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

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

在本教程中，你将了解：

在 XAML 中创建 Xamarin.FormsLabel。
更改 Label 的外观。
在一个 Label 中显示具有多种格式的文本。

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

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

创建标签

剩余 6 分钟

Visual Studio
Visual Studio for Mac

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

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

重要

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

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。

在“解决方案资源管理器”的 LabelTutorial 项目中，双击 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="LabelTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
        <Label Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center" />
   </StackLayout>
</ContentPage>

此代码以声明方式定义页面的用户界面，该界面由 StackLayout 中的 Label 组成。 Label.Text 属性指定显示的文本，HorizontalOptions 属性指定 Label 将水平居中。

在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序：

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

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

重要

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

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。

在“Solution Pad”的 LabelTutorial 项目中，双击 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="LabelTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
        <Label Text="Welcome to Xamarin.Forms!"
               HorizontalOptions="Center" />
   </StackLayout>
</ContentPage>

此代码以声明方式定义页面的用户界面，该界面由 StackLayout 中的 Label 组成。 Label.Text 属性指定显示的文本，HorizontalOptions 属性指定文本将水平居中。

在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android 模拟器内的应用程序：

更改外观

剩余 4 分钟

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中，修改 Label 声明，更改其视觉外观：
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
此代码设置更改 Label 视觉外观的属性。 TextColor 属性设置 Label 文本的颜色。 FontAttributes 属性将标签的字体设置为斜体，FontSize 属性设置字号。此外，通过设置 TextDecorations 属性向 Label 应用下划线文本效果，并通过将 HorizontalOptions 属性设置为 Center 使其水平居中。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。请注意，Label 的外观已更改：

有关设置 Label 外观的详细信息，请参阅 Xamarin.Forms 标签指南。

在 MainPage.xaml 中，修改 Label 声明，更改其视觉外观：
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
此代码设置更改 Label 视觉外观的属性。 TextColor 属性设置 Label 文本的颜色。 FontAttributes 属性将标签的字体设置为斜体，FontSize 属性设置字号。此外，通过设置 TextDecorations 属性向 Label 应用下划线文本效果，并通过将 HorizontalOptions 属性设置为 Center 使其水平居中。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。请注意，Label 的外观已更改：

有关设置 Label 外观的详细信息，请参阅 Xamarin.Forms 标签指南。

显示格式化文本

剩余 2 分钟

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中，修改 Label 声明，显示在一个 Label 中使用多种格式的文本。
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
此代码显示在一个 Label 中使用多种格式的文本。第一个 Span 中的文本使用 Label 上设置的格式显示，而第二个和第三个 Span 实例中的文本使用 Label 上设置的格式和每个 Span 上额外设置的格式显示。

注意

FormattedText 属性是 FormattedString 类型，包含一个或多个 Span 实例。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。请注意，Label 的外观已更改：

在 Visual Studio 中停止应用程序。

有关设置 Span 外观的详细信息，请参阅 Xamarin.Forms 标签指南中的格式化文本。

在 MainPage.xaml 中，修改 Label 声明，显示在一个 Label 中使用多种格式的文本。
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
此代码显示在一个 Label 中使用多种格式的文本。第一个 Span 中的文本使用 Label 上设置的格式显示，而第二个和第三个 Span 实例中的文本使用 Label 上设置的格式和每个 Span 上额外设置的格式显示。

注意

FormattedText 属性是 FormattedString 类型，包含一个或多个 Span 实例。
如果应用程序仍在运行，请保存对文件所做的更改，应用程序用户界面将自动在模拟器或仿真器中更新。否则，请在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。请注意，Label 的外观已更改：

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

有关设置 Span 外观的详细信息，请参阅 Xamarin.Forms 标签指南中的格式化文本。

恭喜！

100% 完成！

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

在 XAML 中创建 Xamarin.FormsLabel。
更改 Label 的外观。
在一个 Label 中显示具有多种格式的文本。

后续步骤

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

按钮教程

创建标签

更改外观

显示格式化文本

恭喜！

后续步骤

相关链接