Ejercicio: Crear y aplicar un estilo

6 minutos

En este ejercicio se define y se aplica un estilo de nivel de página en la aplicación Calculadora de propinas.

Este ejercicio es una continuación del anterior. Use la solución existente como punto de partida para estos pasos o abra el proyecto TipCalculator en la carpeta exercise3/TipCalculator en el repositorio que ha clonado en el primer ejercicio.

Definir un estilo

Empecemos implementando un estilo de fuente "negrita tamaño 22" que se usará para las etiquetas. El estilo se almacena en un diccionario de nivel de página.

En el proyecto TipCalculator abra el archivo StandardTipPage.xaml.

Agregue un Style al diccionario de recursos de la página, después de los recursos existentes. Use un valor x:Key de infoLabelStyle y un valor TargetType de Label.

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

Agregue una instancia de establecedor que establezca la propiedad FontSize del estilo en el valor del recurso fontSize.

Agregue otro establecedor que establezca la propiedad FontAttributes en Bold.

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

Aplicar el estilo

Busque los tres controles Label que usan un valor de FontSize de {StaticResource fontSize} y un valor de FontAttributes de Bold. Quite esas asignaciones de propiedad de las etiquetas.

Usa la extensión de marcado StaticResource para asignar el estilo infoLabelStyle a estas tres etiquetas:

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

Ejecutar la aplicación. La aplicación debe tener exactamente el mismo aspecto que antes. Sin embargo, ahora los atributos de fuente se establecen con un estilo.

Cambiar los estilos de fuente

Veamos lo fácil que es actualizar los estilos.

Vuelva al estilo del diccionario de recursos y cambie el recurso fontSize a 32.
Vuelva a ejecutar la aplicación para ver los cambios. Las tres etiquetas para Factura, Propina y Total deberían ser más grandes.
Cambie el recurso fontSize de nuevo a 22.

Crear un estilo base

Vamos a expandir la implementación de la página StandardTipPage mediante la agregación de un estilo base. Definirá un nuevo Style con valores que se superponen con el Style que ha creado en los pasos anteriores. A continuación, refactoriza este nuevo estilo en la siguiente parte de este ejercicio.

Abra el archivo StandardTipPage.xaml.
Agregue otro Style al diccionario de recursos de la página. Use un valor x:Key de baseLabelStyle y un valor TargetType de Label.

Importante

Defina este estilo por encima del estilo infoLabelStyle. Este posicionamiento será importante más adelante cuando herede de este estilo. Un estilo solo puede heredar de otro estilo que ya está en el ámbito.

Agregue un establecedor que establezca la propiedad FontSize. Observe que este establecedor es una repetición del establecedor del infoLabelStyle anterior.

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

Aplique el nuevo baseLabelStyle a las dos etiquetas de la página que muestran los importes calculados de la propina y el total. Quite el valor explícito de FontSize de estas etiquetas. El código siguiente muestra un ejemplo.

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

Ejecute la aplicación. Compruebe que los valores de las cantidades calculadas Propina y Total (que contienen los valores 0,00) siguen teniendo el estilo correcto.

Usar herencia de estilo

Ahora está listo para refactorizar los estilos mediante la herencia. La refactorización permite eliminar el uso repetido del establecedor.

Abra el archivo StandardTipPage.xaml.
Busque el estilo infoLabelStyle en el diccionario de recursos de la página. Mueva este estilo por debajo del baseLabelStyle en el diccionario de recursos.

Establezca la propiedad BasedOn del estilo infoLabelStyle en baseLabelStyle. Quite el establecedor para FontSize. Ya no lo necesita porque ahora este estilo hereda el valor FontSize del 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

El orden de los recursos en el diccionario de recursos es importante. El estilo baseLabelStyle debe definirse antes que ningún otro estilo que haga referencia a él, de lo contrario, la herencia de estilos no funciona.