演習 - StackLayout を使用してユーザー インターフェイスを構築する

この演習では、入れ子になった StackLayout コンテナーを使い、ご利用のユーザー インターフェイス (UI) にビューを配置します。 最初のスクリーンショットはスターター プロジェクトで実装されたレイアウト、2 番目のスクリーンショットは完成したプロジェクトのレイアウトを表しています。 あなたが行うことは、StackLayout コンテナーと LayoutOptions を使用して、スターター プロジェクトを完成バージョンにすることです。

スターター ソリューションを確認する

スターター ソリューションには、完全に機能するチップ計算機アプリケーションが含まれています。 まず、このアプリの動作を理解するために、UI を確認します。

1. Visual Studio を使って、前の演習の最初にクローンしたリポジトリの exercise2/TipCalculator フォルダー内にあるスターター ソリューションを開きます。

2. 任意のオペレーティング システムでアプリをビルドして実行します。

3. テキスト ボックスに数値を入力し、アプリを使用して、そのしくみを確認します。

4. チップ量のボタンやスライダーを試します。

5. 完了したら、このアプリを閉じます。

6. MainPage.xaml を開きます。 次の XAML マークアップで示されるように、すべてのビューが 1 つの VerticalStackLayout に配置されていることに注意してください。

   <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 コンテナーを追加すると、外観をより良くすることができます。 目標は、このラボの冒頭にあるスクリーンショットのようなアプリにすることです。

1. MainPage.xaml ファイルを開きます。

2. 40 単位のパディングと 10 単位のスペースを VerticalStackLayout に追加します。

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

3. HorizontalStackLayout を追加して、Label という を、その下の Entry フィールドとグループ化します。 Spacing プロパティを 10に設定します。

4. WidthRequest の Label を 100 に、VerticalOptions のプロパティを Center に設定します。 これらの変更により、そのラベルが Entry フィールドと縦に揃うことが保証されます。

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

5. 別の HorizontalStackLayout を追加して、Label という を、Label という名前の とグループ化します。 Spacing のプロパティを 10 に設定し、Margin プロパティを 0,20,0,0 に設定します。

6. WidthRequest の Label を 100 に設定します

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

7. HorizontalStackLayout を使って、Label という を、Label という名前の とグループ化します。 Spacing プロパティを 10に設定します。

8. WidthRequest の Label を 100 に設定します

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

9. 別の HorizontalStackLayout を追加して、Label という を、Label という名前の とグループ化します。

10. この VerticalOptions の HorizontalStackLayout プロパティを End に設定し、Spacing プロパティを 10 に設定します。

11. WidthRequest の Label を 100 に設定します

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

12. HorizontalStackLayout を使って、キャプション Button の と、キャプション Button の をグループ化します。

13. この Margin の StackLayout プロパティを 0,20,0,0 に設定し、Spacing プロパティを 10 に設定します。

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

14. 最後の HorizontalStackLayout を追加して、キャプション Button の と、キャプション Button の をグループ化します。 この Margin の StackLayout プロパティを 0,20,0,0 に設定し、Spacing プロパティを 10 に設定します。

    <HorizontalStackLayout Margin="0,20,0,0" Spacing="10">
            <Button ... Text="Round Down" />
            <Button ... Text="Round Up" />
    </HorizontalStackLayout>
    

15. 4 つのボタン コントロールすべてで、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 で違いを確認します。 コントロールが正しく配置され、適切なサイズと間隔であることを確認します。

既存の UI の外観を向上させるために、VerticalStackLayout コンテナーと HorizontalStackLayout コンテナーを使いました。 これらのレイアウトは、最もシンプルなレイアウト パネルですが、適切な UI を作成するには十分強力なものです。