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 del repositorio que ha clonado en el primer ejercicio.

Definir un estilo

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

  1. En el proyecto TipCalculator , abra el archivo StandardTipPage.xaml .

  2. Agregue un estilo 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>

  3. Agregue una instancia Setter que establezca la propiedad FontSize del estilo al valor del recurso fontSize.

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

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

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

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

  1. Vuelva al diccionario de recursos, localice su estilo y cambie el recurso fontSize a 32.

  2. Vuelva a ejecutar la aplicación para ver los cambios. Las tres etiquetas para Factura, Propina y Total deberían ser más grandes.

  3. Vuelva a cambiar el recurso fontSize a 22.

Crear un estilo base

Vamos a expandir la implementación de la página StandardTipPage agregando un estilo base. Defina un nuevo estilo con valores que se superpongan con el estilo que creó en los pasos anteriores. A continuación, refactoriza este nuevo estilo en la siguiente parte de este ejercicio.

  1. Abra el archivo StandardTipPage.xaml .

  2. Agregue otro estilo 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 encima del estilo infoLabelStyle . Este posicionamiento es importante más adelante cuando hereda de este estilo. Un estilo solo puede heredar de otro estilo que ya está en el ámbito.

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

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

  4. Aplique el nuevo baseLabelStyle a las dos etiquetas de la página que muestran los importes calculados para la propina y el total. Elimine la configuración explícita de FontSize en 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" />

  5. 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 FontSize .

  1. Abra el archivo StandardTipPage.xaml .

  2. Busque el estilo infoLabelStyle en el diccionario de recursos de la página. Asegúrese de que este estilo está debajo del baseLabelStyle en el diccionario de recursos.

  3. Establezca la propiedad BasedOn del estilo infoLabelStyle en baseLabelStyle. Quite el establecedor para FontSize. Ya no lo necesita porque este estilo hereda ahora la configuración 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 de que cualquier otro estilo que haga referencia a él, de lo contrario, la herencia de estilos no funcione.

  4. Ejecute la aplicación y compruebe que los estilos de las etiquetas y las cantidades calculadas sigan teniendo el estilo correcto.