演習: ページレベルのリソースを使用する

5 分

このモジュール内の演習はすべて、構築済みの TipCalculator アプリケーションに関連します。このモジュールを通して、このアプリを変更して改善します。この演習では、ページレベルリソースを使用して、XAML 値の繰り返しをなくします。

このモジュールでは、.NET 9.0 SDK を使います。適切なコマンドターミナルで次のコマンドを実行して、.NET 9.0 がインストールされていることを確認します。

dotnet --list-sdks

次の例のような出力が表示されます。

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

9 で始まるバージョンが一覧に表示されていることを確実にします。何も表示されない場合、またはコマンドが見つからない場合は、最新の .NET 9.0 SDK をインストールしてください。

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

GitHub から演習リポジトリをクローンするかダウンロードします。

Note

ビルドによって生成されたファイルが最大パス長を超えないようにするため、演習コンテンツを C:\dev などの短いフォルダーパスに複製またはダウンロードすることをお勧めします。
Visual Studio を使用するか、または Visual Studio Code 内のこのフォルダーを直接使用して、exercise1/TipCalculator フォルダーのスターターソリューションを開きます。
これがご利用の環境でビルドされ、実行されることを確認します (任意のプラットフォーム)。
数分間かけてこのアプリケーションを調べて実行し、どのように動作するかを理解します。

このアプリケーションには 2 つのページがあります。 StandardTipPage ページは、簡単なチップ計算器です。ページに値を入力すると、チップ (15%) と合計料金が計算されます。次の図は、Android デバイス上で実行されているアプリケーションを示しています。

[Light] ボタンと [Dark] ボタンで、ページの配色テーマを変更できます。既定値は Light テーマです。 [Dark] を選択すると、背景の色とテキストの色が反転されます。

[Use Custom Calculator] ボタンをクリックすると、表示が CustomTipPage ページに切り替わります。このページでは、スライダーを使用してチップの割合を変更できます。 15% と 20% のボタンを選択しても、定義済みの割合に基づいてチップを計算できます。

XAML の繰り返しの検索

StandardTipPage.xaml ファイルを開きます。
LayoutRoot グリッドの背景色を設定する XAML マークアップを見つけます。ハードコーディングされた値が使われることがわかります。
```
<Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">
```

"左側の列" のラベルのテキストの色を Navy に、フォントサイズを 22 に設定する XAML マークアップを見つけます。これらの同じ値が 3 つのラベルで使用されることがわかります。

<!-- Left column = static labels -->
<Label x:Name="billLabel"  Text="Bill"  TextColor="Navy" FontSize="22" ... />
<Label x:Name="tipLabel"   Text="Tip"   TextColor="Navy" FontSize="22" ... />
<Label x:Name="totalLabel" Text="Total" TextColor="Navy" FontSize="22" ... />

"右側の列" のラベルの色を Navy に、ポイントサイズを 22 に設定する XAML コードを見つけます。これらの同じ値が 2 つのラベルで使用されることがわかります。

プロパティ設定の一部が論理的なグループを形成しているようです。たとえば、ネイビーと 22 の組み合わせは、複数のラベルで使用されます。
```

<Entry ... />
<Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" FontSize="22"   ... />
<Label x:Name="totalOutput" Text="0.00" TextColor="Navy" FontSize="22"   ... />
```
TextColor と FontSize の値を変更する際に必要な作業について考えます。 5 つの場所で変更する必要があります。

リソースの定義

次に、アプリケーション内で見つけた繰り返しコードの一部の削除を開始するために、XAML でリソースを作成しましょう。

StandardTipPage.xaml ファイルを開きます。
ContentPage.Resources セクション内に Color リソースを定義します。リソースに、リソース ID が x:Key である bgColor と、値 #C0C0C0 を指定します (色の名前として Silver を使用することもできます)。
2 番目の Color リソースを定義します。これには、リソース ID が x:Key である fgColor と、値 #0000AD を指定します (色の名前として Navy を使用することもできます)。

ID が fontSize である x:Double リソースを定義します。このリソースの値を 22 に設定します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             ...>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="bgColor">#C0C0C0</Color>
            <Color x:Key="fgColor">#0000AD</Color>
            <x:Double x:Key="fontSize">22</x:Double>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid x:Name ="LayoutRoot" ...>
        ...

静的リソースの使用

ここで、作成したリソースを適用しましょう。

StaticResource マークアップ拡張機能を使用して、LayoutRoot Grid コントロールの Background プロパティに bgColor リソースを適用します。
```
...
<Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">
```

TextColor を現在 Navy に設定しているすべての Label コントロールの TextColor プロパティに、fgColor リソースを適用します。さらに、ハードコーディングされているフォントサイズを fontSize 静的リソースに置き換えます。

...
<!-- Left column = static labels -->
<Label x:Name="billLabel"  Text="Bill"  TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
<Label x:Name="tipLabel"   Text="Tip"   TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
<Label x:Name="totalLabel" Text="Total" TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
...

アプリケーションを実行します。起動時に StandardTipPage には、以前と同様、淡色の背景に濃色のテキストが表示されることを確認します。

Note

この時点で、CustomTipPage や Light および Dark テーマのスタイル設定について心配しないでください。これらの問題については、後で対処します。

演習: ページレベルのリソースを使用する

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

XAML の繰り返しの検索

リソースの定義

静的リソースの使用

フィードバック

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