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

10 分

この演習では、Grid を使って、ユーザーインターフェイス (UI) のビューを配置します。 TipCalculator プロジェクトの別のバージョンから始めて、UI がより直感的になるように調整します。また、ボタンをページの下部に移動します。今回は、VerticalStackLayout と HorizontalStackLayout を使うのではなく、Grid レイアウトを使います。次の画像は、初期の UI と、この演習の手順に従った結果の UI を示しています。

垂直の StackLayout を使用してすべてのラベルが垂直に配置されているスターターソリューションと、コントロールが Grid を使用して配置されている完成しているスターターを示すスクリーンショット。

スターターソリューションを開く

スターターソリューションには、完全に機能するチップ計算機アプリケーションが含まれています。

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

MainPage.xaml を開きます。すべてのビューが 1 つの VerticalStackLayout パネルを使って表示されていることに注意してください。

<?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>

        <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>

Grid レイアウトを作成する

40 単位のパディングで、レイアウトパネルを VerticalStackLayout から Grid に変更します。
Grid に対して 7 つの行と 2 つの列を定義します。 4 番目の行を除き、すべての行が Auto サイズになるようにします。 4 行目では、グリッドに残っている使用可能なすべての領域を取得するように、Star を使う必要があります。両方の列で、Star サイズを使用します。
```
<Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
      ColumnDefinitions="*, *"
      Padding="40">
    ...
</Grid>
```

セルにビューを配置する

Grid.Row と Grid.Column の設定を各ビューに追加し、それらを Grid の適切なセルに割り当てます。以下のスクリーンショットを使用すれば、各ビューの配置場所を決定するのに役立ちます。

次の例では、Bill の Label と、billInput の Entry ビューの位置を設定する方法を示します。
```
...
<Label Text="Bill" Grid.Row="0" Grid.Column="0"/>
<Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>
...
```
Label の VerticalOptions プロパティを Center に設定して、Bill の Label と Entry を配置します。
Grid.ColumnSpan の設定を Slider に追加して、2 つの列にまたがるようにします。
```
<Slider ... Grid.ColumnSpan="2" ... />
```
Tip Percentage というテキストの Label を見つけます。これを、四角形の左下の位置を占めるように設定します。
```
<Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" ... />
```
tipPercent という名前の Label を見つけます。これを、四角形の右下の位置を占めるように設定します。
```
<Label x:Name="tipPercent" VerticalOptions="End" HorizontalOptions="End" ... />
```
4 つのボタンすべての Margin プロパティを 5 に設定します。

このページの完全な Extensible Application Markup Language (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">
    <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
          ColumnDefinitions="*, *"
          Padding="40">

        <Label Text="Bill" VerticalOptions="Center" Grid.Row="0" Grid.Column="0"/>
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>

        <Label Text="Tip" Grid.Row="1" Grid.Column="0"/>
        <Label x:Name="tipOutput" Text="0.00" Grid.Row="1" Grid.Column="1"/>

        <Label Text="Total" Grid.Row="2" Grid.Column="0"/>
        <Label x:Name="totalOutput" Text="0.00" Grid.Row="2" Grid.Column="1"/>

        <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" Grid.Row="3" Grid.Column="0"/>
        <Label x:Name="tipPercent" Text="15%" VerticalOptions="End" HorizontalOptions="End" Grid.Row="3" Grid.Column="1"/>
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"/>

        <Button Text="15%" Clicked="OnNormalTip" Margin="5" Grid.Row="5" Grid.Column="0"/>
        <Button Text="20%" Clicked="OnGenerousTip" Margin="5" Grid.Row="5" Grid.Column="1"/>

        <Button x:Name="roundDown" Margin="5" Text="Round Down" Grid.Row="6" Grid.Column="0"/>
        <Button x:Name="roundUp"   Margin="5" Text="Round Up" Grid.Row="6" Grid.Column="1"/>

    </Grid>
</ContentPage>

結果を確認する

アプリケーションを実行し、UI で違いを確認します。既存の UI の外観を向上させるために、Grid を使用しました。 Grid は StackLayout よりも強力です。つまり、Grid を使うと、行全体にビューを配置する操作がはるかに簡単になります。

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

スターター ソリューションを開く

Grid レイアウトを作成する

セルにビューを配置する

結果を確認する

フィードバック

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

スターターソリューションを開く