演習: アプリケーション全体のリソースを使用する

  • 5 分

この演習の目標は、.NET Multi-Platform App UI (MAUI) アプリケーション内の複数ページでリソースを Tip Calculator Application クラス内のリソース ディクショナリに移動して、使用可能にすることです。

この演習は前の演習の続きです。 これらの手順の開始点として既存のソリューションを使用するか、最初の演習で複製したリポジトリの exercise4/TipCalculator フォルダーで TipCalculator プロジェクトを開きます。

ページ レベルのリソースを確認する

1 つのページで定義されているリソースが別のページでは使用できないことを確認しましょう。 このセクションの最後には、アプリが正しく実行されなくなります。 ただし、次のセクションでこれを修正します。

  1. TipCalculator プロジェクトで、CustomTipPage.xaml ファイルを開きます。

  2. infoLabelStyle リソースを billLabel ラベルのスタイルとして設定し、FontSize プロパティと FontAttributes プロパティの既存の設定を削除します。

    <Label x:Name="billLabel" Text="Bill" Style="{StaticResource infoLabelStyle}" Grid.Row="0" Grid.Column="0" />

  3. アプリを実行します。

  4. [ カスタム計算ツールを使用 ] を選択して、[ CustomTipPage ] ページを表示します。 [Bill] ラベルを確認します。 フォント サイズは他のラベルより小さいはずで、これは太字ではありません。 この動作は、ページが infoLabelStyle という名前のリソース (別のページのリソース ディクショナリ内にあります) を見つけられなかったため、フォント サイズとフォント属性に既定値が使用されるためです。

    CustomTipPage ページのスクリーンショット。Bill ラベルのスタイルが正しくありません。

アプリケーション レベルのリソース用にディクショナリを作成する

複数ページ上で使用するリソースを保持するための、アプリケーション全体のリソース ディクショナリを作成してみましょう。

  1. App.xaml ファイルを開きます。 このファイルには現在、.NET MAUI に組み込まれているコントロールに対して既定で使用される既存の一部のリソース ディクショナリとスタイルと共に、リソース ディクショナリが 1 つ含まれていることに注意してください。 既定で含まれるすべてのスタイルを表示するには、 Resources/Styles.xaml ファイルを表示します。

    <?xml version = "1.0" encoding = "UTF-8" ?>
<Application 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.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

  2. StandardTipPage.xaml ファイルを開き、fontSize リソースと baseLabelStyle スタイルと infoLabelStyle スタイルを App.xaml ファイル内のリソース ディクショナリに移動します。 App.Xaml ファイルが次の例のように表示されるように、既存のスタイルの後に配置します。

    <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>

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

            <Style x:Key="baseLabelStyle" TargetType="Label">
                <Setter Property="FontSize" Value="{StaticResource fontSize}" />
            </Style>
            <Style x:Key="infoLabelStyle" BasedOn="{StaticResource baseLabelStyle}" TargetType="Label">
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

  3. アプリを実行します。

  4. [ カスタム計算ツールの使用 ] タブを選択し、[請求書] ラベルのスタイルが正しいことを確認します。