Xamarin.Forms 卷標教學課程

在嘗試此教學課程之前，您應該已成功完成：

建置您的第一個 Xamarin.Forms 應用程式快速入門。
StackLayout 教學課程。

在本教學課程中，您會了解如何：

在 XAML 中建立 Xamarin.FormsLabel 。
變更 Label 的外觀。
在單一 Label 中呈現具有多種格式的文字。

您將會使用 Visual Studio 2019 或 Visual Studio for Mac 來建立能示範如何在 Label 中顯示文字的簡單應用程式。下列螢幕擷取畫面顯示的是最終的應用程式：

您也會使用 XAML 熱重新載入 Xamarin.Forms 來查看 UI 變更，而不需重建應用程式。

建立標籤

剩餘 6 分鐘

Visual Studio
Visual Studio for Mac

若要完成此教學課程，您應該有 Visual Studio 2019 (最新版本)，並已安裝 [使用 .NET 進行行動開發] 工作負載。此外，您還需要配對的 Mac 才能在 iOS 上建置教學課程應用程式。如需安裝 Xamarin 平台的相關資訊，請參閱安裝 Xamarin。如需有關將 Visual Studio 2019 連線至 Mac 建置主機的相關資訊，請參閱為 Xamarin.iOS 開發與 Mac 配對。

啟動 Visual Studio，並建立名為 LabelTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段會要求將解決方案命名為 LabelTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.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 模擬器內的應用程式：

若要完成本教學課程，您應該具備 Visual Studio for Mac (最新版本)，並已安裝 iOS 和 Android 平台支援。此外，您還需要 Xcode (最新版本)。如需安裝 Xamarin 平台的詳細資訊，請參閱安裝 Xamarin。

啟動 Visual Studio for Mac，並建立名為 LabelTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段會要求將解決方案命名為 LabelTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.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 屬性則會設定字型大小。此外，若要對 Label 套用底線文字裝飾，可透過設定其 TextDecorations 屬性來完成，若要讓其水平置中，則可透過將 HorizontalOptions 屬性設定為 Center。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。請觀察一下，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 屬性則會設定字型大小。此外，若要對 Label 套用底線文字裝飾，可透過設定其 TextDecorations 屬性來完成，若要讓其水平置中，則可透過將 HorizontalOptions 屬性設定為 Center。
如果應用程式仍在執行，請將變更儲存至檔案，應用程式使用者介面將會在您的模擬器中自動更新。否則，請在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。請觀察一下，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 模擬器內的應用程式。請觀察一下，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 模擬器內的應用程式。請觀察一下，Label 外觀已變更：

在 Visual Studio for Mac 中，停止應用程式。

如需設定Span外觀的詳細資訊，請參閱標籤指南中的Xamarin.Forms格式化文字。

恭喜！

100% 完成！

恭喜您完成此教學課程，您已學會如何：

在 XAML 中建立 Xamarin.FormsLabel 。
變更 Label 的外觀。
在單一 Label 中呈現具有多種格式的文字。

下一步

若要深入瞭解使用 Xamarin.Forms建立行動應用程式的基本概念，請繼續進行 Button 教學課程。

按鈕教學課程

共用方式為

建立標籤

變更外觀

呈現格式化文字

恭喜！

下一步

相關連結