練習：建立並套用樣式

6 分鐘

在本練習中，您會在 Tip Calculator 應用程式中定義和套用頁面層級樣式。

此練習是前一個練習的延續。您可以使用現有的解決方案做為這些步驟的起點，或開啟您在第一次練習中複製存放庫中 exercise3/TipCalculator 資料夾內的 TipCalculator 專案。

定義樣式

讓我們從實作要用於標籤的「大小 22 粗體」字型樣式開始著手。將該樣式儲存在頁面層級的字典中。

在 [TipCalculator] 專案中，開啟 StandardTipPage.xaml 檔案。

在現有資源之後，將樣式新增至頁面的資源字典。使用 infoLabelStyle 的 x：Key 值和 Label 的 TargetType 值。

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

新增 Setter 執行個體，將樣式的 FontSize 屬性設為 fontSize 資源中的值。

新增另一個 Setter ，將 FontAttributes 屬性設為 Bold。

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

套用樣式

找出使用 {StaticResource fontSize} 的 FontSize 值和 Bold 的 FontAttributes 值的三個 Label 控制項。將這些屬性指派從標籤移除。

使用 StaticResource 標記延伸，將 infoLabelStyle 樣式指派給這三個標籤：

<!-- 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) 三個標籤應該更大。
將 fontSize 資源變更回 22。

建立基底樣式

讓我們藉由新增基底樣式來延伸 StandardTipPage 頁面的實作。您會以與先前步驟所建立樣式重疊的值，來定義新的樣式。然後，您會在本練習的下一部分中重構這個新樣式。

開啟 [StandardTipPage.xaml] 檔案。
將其他樣式新增至頁面的資源字典。使用 baseLabelStyle 的 x：Key 值和 Label 的 TargetType 值。

重要

在 infoLabelStyle 樣式上方定義此樣式。當您繼承此樣式後，此位置將非常重要。樣式只能繼承範圍中其他樣式。

新增 Setter 以設定 FontSize 屬性。請注意，這個 Setter 是舊版 infoLabelStyle 中 Setter 的重複項目。

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

將新的 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" />

執行應用程式。確認計算小費和總計金額值 (包含值 0.00) 的樣式仍然正確。

使用樣式繼承

您現在已做好使用繼承來重構樣式的準備。重構會讓您消除重複的 setter 使用。

開啟 [StandardTipPage.xaml] 檔案。
在頁面的資源字典中找出 infoLabelStyle 樣式。將此樣式移至資源字典中的 baseLabelStyle 下方。

將 infoLabelStyle 樣式的 BasedOn 屬性設定為 baseLabelStyle。移除 FontSize 的 setter。您已不再需要，因為此樣式現在會從基底樣式繼承 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 樣式必須先定義，才能定義參照該樣式的任何其他樣式，否則樣式繼承將無法運作。