演習: スタイルを作成して適用する

6 分

この演習では、Tip Calculator アプリケーションでページレベルのスタイルを定義し、適用します。

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

スタイルの定義

まず、ラベルに使用する "サイズ 22 太字" フォントスタイルを実装します。ページレベルのディクショナリにスタイルを格納します。

TipCalculator プロジェクト内の StandardTipPage.xaml ファイルを開きます。

既存のリソースの後にあるページのリソースディクショナリに Style を追加します。 infoLabelStyle の x:Key 値、Label の TargetType 値を使います。

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="infoLabelStyle" TargetType="Label">
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Setter インスタンスを追加し、スタイルの FontSize プロパティを fontSize リソース内の値に設定します。

FontAttributes プロパティを Bold に設定する別の Setter を追加します。

<Style x:Key="infoLabelStyle" TargetType="Label">
    <Setter Property="FontSize" Value="{StaticResource fontSize}" />
    <Setter Property="FontAttributes" Value="Bold" />
</Style>

スタイルを適用する

{StaticResource fontSize} の FontSize 値と Bold の FontAttributes 値を使う 3 つの Label コントロールを特定します。ラベルからこれらのプロパティの割り当てを削除します。

StaticResource マークアップ拡張機能を使って、infoLabelStyle スタイルをこれら 3 つのラベルに割り当てます。

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

アプリを実行します。アプリは先ほどとまったく同じようになります。ただし、ラベルのフォント属性はスタイルで設定されています。

フォントスタイルを変更する

スタイルの更新がどれほど簡単かを見てみましょう。

リソースディクショナリの自分のスタイルに戻り、fontSize リソースを 32 に変更します。
もう一度アプリを実行して、変更内容を表示します。 Bill、Tip、Total の 3 つのラベルが大きくなっているはずです。
fontSize リソースを 22 に戻します。

基本スタイルを作成する

基本スタイルを追加することで、StandardTipPage ページの実装を拡張しましょう。前の手順で作成した Style と重複する値を持つ、新しい Style を定義します。その後、この演習の次のパートでこの新しいスタイルをリファクタリングします。

StandardTipPage.xaml ファイルを開きます。
ページのリソースディクショナリに別の Style を追加します。 baseLabelStyle の x:Key 値、Label の TargetType 値を使います。

重要

infoLabelStyle スタイルの上にこのスタイルを定義します。このスタイルから継承する場合、この配置が後で重要になります。スタイルは、既にスコープ内にある別のスタイルからしか継承できません。

FontSize プロパティを設定する Setter を追加します。このセッターは、先ほどの infoLabelStyle からのセッターの繰り返しであることに注目してください。

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        ...
    <ResourceDictionary>
</ContentPage.Resources>

チップと合計の計算金額を表示するページの 2 つのラベルに新しい baseLabelStyle を適用します。明示的な FontSize の設定をこれらのラベルから削除します。次のコードは例を示します。

<!-- Right column = user input and calculated-value output -->
...
<Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="1" Grid.Column="1" />
<Label x:Name="totalOutput" Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="2" Grid.Column="1" />

アプリケーションを実行します。計算した Tip と Total の金額の値 (値 0.00 を含む) が、まだ正しくスタイル設定されていることを確認します。

スタイルの継承を使用する

継承を使用することにより、スタイルをリファクタリングする準備ができました。リファクタリングすると、セッターを繰り返し使わずに済みます。

StandardTipPage.xaml ファイルを開きます。
ページのリソースディクショナリで infoLabelStyle を検索します。このスタイルは、リソースディクショナリの baseLabelStyle の下に移動します。
infoLabelStyle スタイルの BasedOn プロパティを baseLabelStyle に設定します。 FontSize のセッターを削除します。このスタイルはベーススタイルから FontSize の設定を継承するようになったので、不要になりました。
```
<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <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>
</ContentPage.Resources>
```
注意

リソースディクショナリのリソースの順序は重要です。 baseLabelStyle スタイルは、それを参照する他のスタイルより前に定義する必要があります。そうしないと、スタイルの継承が機能しません。
アプリを実行し、ラベルと計算された金額のスタイルがまだ正しく設定されていることを確認します。