Xamarin.Forms StackLayout 教學課程

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

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

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

在 XAML 中建立 Xamarin.FormsStackLayout 。
指定 StackLayout 的方向。
控制 StackLayout 內的子檢視對齊和延展。

您將會使用 Visual Studio 2019 或 Visual Studio for Mac 來建立能示範如何在 StackLayout 內對齊控制項的簡單應用程式。下列螢幕擷取畫面顯示的是最終的應用程式：

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

建立 stacklayout

剩餘 9 分鐘

StackLayout 是一種配置，可將其子系以水平或垂直方式組織成一維堆疊。根據預設，StackLayout 是垂直方向。

Visual Studio
Visual Studio for Mac

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

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

重要

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

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.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 屬性之外，Padding 和 Spacing 屬性也可在 StackLayout 上設定。 Padding 屬性值會指定 StackLayout 中各檢視之間的距離，而 Spacing 屬性值會指定 StackLayout 中每個子項目之間的空間量。如需詳細資訊，請參閱邊界和邊框距離。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式：

如需的詳細資訊 StackLayout，請參閱 Xamarin.Forms StackLayout。

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

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

重要

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

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.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 屬性之外，Padding 和 Spacing 屬性也可在 StackLayout 上設定。 Padding 屬性值會指定 StackLayout 中各檢視之間的距離，而 Spacing 屬性值會指定 StackLayout 中每個子項目之間的空間量。如需詳細資訊，請參閱邊界和邊框距離。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式：

如需的詳細資訊 StackLayout，請參閱 Xamarin.Forms StackLayout。

指定方向

剩餘 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 模擬器內的應用程式：

請注意，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 模擬器內的應用程式：

請注意，StackLayout 內的 Label 執行個體現在會以水平方向對齊，不是以垂直方向。

控制項的對齊和擴充

剩餘 4 分鐘

內StackLayout子檢視的大小和位置取決於子檢視和 HeightRequestWidthRequest屬性的值，以及和 VerticalOptions 屬性的值HorizontalOptions。

您可以從 LayoutOptions 結構中，將 HorizontalOptions 和 VerticalOptions 屬性設定為欄位，該結構涵蓋兩個版面配置喜好設定：

對齊 – 子檢視慣用的對齊方式，這會決定子檢視在其父系版面配置中的位置和大小。
延展 – 指出如果可行，子檢視是否應該使用額外的空間 (僅供 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 模擬器內的應用程式：

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 模擬器內的應用程式：

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

指定方向

控制項的對齊和擴充

恭喜！

下一步

相關連結