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

5 分

このモジュールのすべての演習は、事前構築済みの TipCalculator アプリケーションに関連しています。このモジュールを通して、このアプリを変更して改善します。この演習では、ページレベルのリソースを使用して、Extensible Application Markup Language (XAML) コード内の繰り返される値を排除します。

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

dotnet --list-sdks

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

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

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

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

GitHub から演習リポジトリを複製またはダウンロードします。

注

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

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

[明るい] ボタンと [濃色] ボタンを使用すると、ページの色テーマを変更できます。既定値は Light テーマです。 [濃色] を選択すると、背景とテキストの色が反転します。

[ カスタム計算ツールを使用 ] ボタンをクリックすると、表示が [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 リソースを定義します。リソースに bgColor の x:Key リソース ID と C0C0#C0 値を指定します (カラー Silverの名前を使用することもできます)。
2 つ目の Color リソースを定義します。 それに、fgColor の x:Key リソース ID と #0000AD 値を指定します (カラー Navyの名前を使用することもできます)。

fontSize の ID を持つ 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 のマークアップ拡張機能を使用して、LayoutRootGrid コントロールの 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 が明るい背景に暗いテキストを表示することを確認します。

注

この時点では、 CustomTipPage または 明るい テーマと濃色テーマのスタイル設定について心配しないでください。後でこれらの問題に対処します。

フィードバック

このページはお役に立ちましたか?