練習 - 使用 StackLayout 來建置使用者介面

10 分鐘

在此練習中，您會使用巢狀 StackLayout 容器在使用者介面 (UI) 中排列檢視。第一個螢幕擷取畫面顯示由入門專案達成的版面配置，第二個則顯示已完成專案的版面配置。您的工作是使用 StackLayout 容器和 LayoutOptions，將入門專案轉換成已完成的版本。

顯示入門解決方案的螢幕擷取畫面，其中所有標籤都垂直放在接近的位置。它的旁邊是已完成的解決方案，其控制項以更直覺的方式對齊和定位。

探索入門方案

入門方案包含一個功能完整的小費計算機應用程式。首先請瀏覽 UI，以了解應用程式的功能。

使用 Visual Studio，在 exercise2/TipCalculator 資料夾中開啟您前個練習開始時複製的存放庫的入門解決方案。
在您慣用的作業系統上建立並執行應用程式。
在文字方塊中輸入數字，並使用應用程式來查看其運作方式。
嘗試使用指尖量按鈕和滑桿。
完成後，請關閉應用程式。

開啟 MainPage.xaml。請注意，所有檢視都會置於一個 VerticalStackLayout ，如下列 XAML 標記所示：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:TipCalculator"
         x:Class="TipCalculator.MainPage">
    <VerticalStackLayout>

        <Label Text="Bill" />
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />

        <Label Text="Tip"   />
        <Label x:Name="tipOutput" Text="0.00" />

        <Label Text="Total" />
        <Label x:Name="totalOutput" Text="0.00" />

        <Label Text="Tip Percentage" />
        <Label x:Name="tipPercent" Text="15%" />
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <Button Text="15%" Clicked="OnNormalTip" />
        <Button Text="20%" Clicked="OnGenerousTip" />

        <Button x:Name="roundDown" Text="Round Down" />
        <Button x:Name="roundUp"   Text="Round Up" />

    </VerticalStackLayout>
</ContentPage>

修正 UI

由於您的應用程式已執行，接下來您可以透過新增 HorizontalStackLayout 容器使其變得更美觀。目標是要讓應用程式看起來像實驗室開頭的螢幕擷取畫面。

請開啟 MainPage.xaml 檔案。
新增 40 邊框間距單位和 10 間距單位至 VerticalStackLayout：
```
<VerticalStackLayout Padding="40" Spacing="10">
```
新增 HorizontalStackLayout 以建立下方具有 Entry 欄位的 Bill 的 Label 群組。將 Spacing 屬性設為 10。

將帳單 Label 的 WidthRequest 設定為 100，並將 VerticalOptions 屬性設定為 Center。這些變更可確保標籤與 Entry 欄位垂直對齊。

<HorizontalStackLayout Spacing="10">
    <Label Text="Bill" WidthRequest="100" VerticalOptions="Center"/>
    <Entry ... />
</HorizontalStackLayout>

新增另一個 HorizontalStackLayout 以建立具有名為 tipOutputLabel 的 Tip 的 Label群組。將 Spacing 屬性設定為 10，並將 Margin 屬性設定為 0,20,0,0。

將提示 Label 的 WidthRequest 設定為 100

<HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
    <Label Text="Tip" WidthRequest="100" />
    <Label .../>
</HorizontalStackLayout>

使用 HorizontalStackLayout 以建立具有名為 totalOutputLabel 為 Total 的 Label 群組。將 Spacing 屬性設為 10。

將總計 Label 的 WidthRequest 設定為 100

<HorizontalStackLayout Spacing="10">
    <Label Text="Total" WidthRequest="100"  />
    <Label .../>
</HorizontalStackLayout>

新增另一個 HorizontalStackLayout 以建立具有名為 tipPercentLabel 為 tipPercentage 的 Label 群組。
將此 HorizontalStackLayout 的 VerticalOptions 屬性設定為 End，並將 Spacing 屬性設定為 10：

將提示百分比 Label 的 WidthRequest 設定為 100

<HorizontalStackLayout VerticalOptions="End" Spacing="10">
    <Label Text="Tip Percentage" WidthRequest="100"/>
    <Label ... />
</HorizontalStackLayout>

使用 HorizontalStackLayout 以搭配 15% 標題建立 Button 群組，以及搭配 20% 標題建立 Button 群組。

將此 StackLayout 的 Margin 屬性設定為 0,20,0,0，並將 Spacing 屬性設定為 10：

<HorizontalStackLayout  Margin="0,20,0,0" Spacing="10">
    <Button Text="15%" ... />
    <Button Text="20%" ... />
</HorizontalStackLayout>

新增最後的HorizontalStackLayout，以搭配向下四捨五入標題建立 Button 群組，以及搭配向上四捨五入標題建立 Button 群組。將此 StackLayout 的 Margin 屬性設定為 0,20,0,0，並將 Spacing 屬性設定為 10：
```
<HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
        <Button ... Text="Round Down" />
        <Button ... Text="Round Up" />
</HorizontalStackLayout>
```
在全部四個按鈕控制項上，將 HorizontalOptions 屬性設定為 Center，並將 WidthRequest 屬性設定為 150。例如：
```
<Button Text="15%" WidthRequest="150" HorizontalOptions="Center" ... />
```

內容頁面的完整 Extensible Application Markup Language (XAML) 標記看起來應該像這樣：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TipCalculator"
             x:Class="TipCalculator.MainPage">

    <VerticalStackLayout Padding="40" Spacing="10">

        <HorizontalStackLayout Spacing="10">
            <Label Text="Bill" WidthRequest="100" VerticalOptions="Center" />
            <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Label Text="Tip"  WidthRequest="100" />
            <Label x:Name="tipOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout Spacing="10">
            <Label Text="Total" WidthRequest="100"/>
            <Label x:Name="totalOutput" Text="0.00" />
        </HorizontalStackLayout>

        <HorizontalStackLayout VerticalOptions="End" Spacing="10">
            <Label Text="Tip Percentage" WidthRequest="100"/>
            <Label x:Name="tipPercent" Text="15%" />
        </HorizontalStackLayout>
        
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />

        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button Text="15%" Clicked="OnNormalTip" WidthRequest="150" HorizontalOptions="Center"/>
            <Button Text="20%" Clicked="OnGenerousTip"  WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>
        
        <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button x:Name="roundDown" Text="Round Down" WidthRequest="150" HorizontalOptions="Center"/>
            <Button x:Name="roundUp"   Text="Round Up" WidthRequest="150" HorizontalOptions="Center"/>
        </HorizontalStackLayout>

    </VerticalStackLayout>

</ContentPage>

檢查結果

再次執行應用程式，並查看 UI 中的差異。請確認控制項正確對齊，且大小和間距適中。

您已使用 VerticalStackLayout 和 HorizontalStackLayout 容器來改善現有 UI 的美觀問題。這些版面配置是最簡單的版面配置面板，但功能強大到足以產生合理的 UI。

練習 - 使用 StackLayout 來建置使用者介面

探索入門方案

修正 UI

檢查結果

意見反應