Exercício: criar e aplicar um estilo

6 minutos

Neste exercício, defina e aplique um estilo no nível da página no aplicativo Calculadora de Gorjetas.

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 do repositório clonado no exercício anterior.

Definir um estilo

Vamos começar implementando um estilo de fonte "tamanho 22 Negrito" para usar nos 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 instância do Setter que defina a propriedade FontSize do estilo com 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 as atribuições de propriedade dos rótulos.

Use a extensão de marcação StaticResource para atribuir o estilo infoLabelStyle a estes 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}" ... />

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

Alterar o estilo de fonte

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 exibir as alterações. Os três rótulos de Bill, Tip e Total devem ser maiores.
Altere o recurso fontSize novamente para 22.

Criar um estilo de base

Para expandir a implementação da página StandardTipPage, adicione um estilo base. Defina um novo Estilo com valores que se sobrepõem ao Estilo que você criou nas etapas anteriores. Em seguida, refatore 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 posteriormente quando você herdar desse estilo. Um estilo só pode herdar de outro 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 a seguir 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 o aplicativo. Verifique se os valores calculados de Gorjeta e Total (contendo os valores 0,00) ainda estão com estilo correto.

Usar herança de estilo

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

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

Defina a propriedade BasedOn para o estilo infoLabelStyle como baseLabelStyle. Remova o Setter para FontSize. Ele não é mais necessário porque esse estilo agora herda a configuração de 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>

Observação

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