Exercício: Criar e aplicar um estilo

6 minutos

Neste exercício, você define e aplica um estilo de nível de página no aplicativo Calculadora de Dicas.

Este exercício é uma continuação do exercício anterior. Use sua solução existente como ponto de partida para essas etapas ou abra o projeto TipCalculator na pasta exercise3/TipCalculator no repositório clonado no primeiro exercício.

Definir um estilo

Vamos começar implementando um estilo de fonte "tamanho 22 negrito" para usar em rótulos. Armazene o estilo em um dicionário no nível da página.

No projeto TipCalculator, abra o arquivo StandardTipPage.xaml.

Adicione um Estilo ao dicionário de recursos da página, após os recursos existentes. Use um valor x:Key de infoLabelStyle e um valor TargetType de Label.

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

Adicione uma ocorrência de Setter que defina a propriedade FontSize do estilo como o valor no recurso fontSize .

Adicione outro Setter que defina a propriedade FontAttributes como Bold.

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

Aplicar o estilo

Localize os três controles Label que usam um valor FontSize de {StaticResource fontSize} e um valor FontAttributes de Bold. Remova essas atribuições de propriedade dos rótulos.

Use a extensão de marcação StaticResource para atribuir o estilo infoLabelStyle a esses três rótulos:

<!-- 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}" ... />

Executar a aplicação. O aplicativo deve ter exatamente a aparência de antes. No entanto, os atributos de fonte para os rótulos agora estão sendo definidos com um estilo.

Alterar o estilo do tipo de letra

Vamos dar uma olhada em como é fácil atualizar estilos.

Volte ao seu estilo no dicionário de recursos e altere o recurso fontSize para 32.
Execute o aplicativo novamente para visualizar as alterações. Os três rótulos para Bill, Tip e Total devem ser maiores.
Altere o recurso fontSize de volta para 22.

Criar um estilo base

Vamos expandir a implementação da página StandardTipPage adicionando um estilo base. Você define um novo Style com valores que se sobrepõem ao Style que você criou nas etapas anteriores. Então, você refatora esse novo estilo na próxima parte deste exercício.

Abra o arquivo StandardTipPage.xaml .
Adicione outro Estilo ao dicionário de recursos da página. Use um valor x:Key de baseLabelStyle e um valor TargetType de Label.

Importante

Defina esse estilo acima do estilo infoLabelStyle . Esse posicionamento será importante mais tarde, quando você herdar desse estilo. Um estilo só pode herdar de outro estilo que já esteja no escopo.

Adicione um Setter que defina a propriedade FontSize . Observe que esse setter é uma repetição do setter do infoLabelStyle anterior.

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

Aplique o novo baseLabelStyle aos dois rótulos na página que exibem os valores calculados para a dica e o total. Remova as configurações explícitas de FontSize desses rótulos. O código seguinte mostra um exemplo.

<!-- 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" />

Execute a aplicação. Verifique se os valores para os valores Tip e Total calculados (contendo os valores 0,00) ainda estão estilizados corretamente.

Usar herança de estilo

Agora você está pronto para refatorar seus estilos usando herança. A refatoração permite eliminar o uso repetido de setter.

Abra o arquivo StandardTipPage.xaml .
Localize o estilo infoLabelStyle no dicionário de recursos da página. Mova esse estilo abaixo de baseLabelStyle no dicionário de recursos.

Defina a propriedade BasedOn para o estilo infoLabelStyle como baseLabelStyle. Remova o setter para FontSize. Você não precisa mais dele porque esse estilo agora herda a configuração FontSize do estilo base.

<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>

Nota

A ordem dos recursos no dicionário de recursos é importante. O estilo baseLabelStyle deve ser definido antes de quaisquer outros estilos que façam referência a ele, caso contrário, a herança de estilo não funcionará.