练习：创建和应用样式

6 分钟

在本练习中，你将在 Tip Calculator 应用程序中定义和应用页面级样式。

本练习是上一个练习的延伸。使用现有解决方案开始执行以下步骤，或打开在第一个练习中克隆的存储库中 exercise3/TipCalculator 文件夹中的 TipCalculator 项目。

定义样式

首先实现用于标签的“22 号粗体”字体样式。将该样式存储在页面级字典中。

在 TipCalculator 项目中，打开 StandardTipPage.xaml 文件。

在现有资源之后，向页面的资源字典添加样式。将 x:Key 值设置为 infoLabelStyle，将 TargetType 值设置为 Label。

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

添加一个将样式的 FontSize 属性设置为 fontSize 资源中的值的“资源库”实例。

添加另一个将 FontAttributes 属性设置为“加粗”的资源库。

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

应用样式

找到三个 FontSize 值为 {StaticResource fontSize} 且 FontAttributes 值为 Bold 的标签控件。从标签中删除这些属性的赋值。

使用 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。
再次运行应用以查看更改。账单、小费和总计的三个标签应该更大。
将 fontSize 资源更改回 22。

创建基准样式

添加基准样式以扩展 StandardTipPage 页的实现。接下来定义新的样式，其值与你在上一步中创建的样式的值相同。然后，将在此练习的下一部分中重构这个新样式。

打开 StandardTipPage.xaml 文件。
向页面的资源字典添加另一个样式。将 x:Key 值设置为 baseLabelStyle，将 TargetType 值设置为 Label。

重要

在 infoLabelStyle 样式上方定义此样式。稍后从此样式继承时，此位置非常重要。样式只能从已在范围内的另一个样式继承。

添加设置了 FontSize 属性的资源库。请注意，此资源库是早期 infoLabelStyle 中资源库的重复项。

<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）的值的样式设置是否仍然正确。

使用样式继承

现在可以使用继承来重构样式了。通过重构，可以不再重复使用 FontSize 资源库。

打开 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 样式必须在引用它的任何其他样式之前定义，否则样式继承不起作用。