Estilos en XAML

Así como hemos agregado algunos colores como recursos de la aplicación, nosotros podemos definir estilos, que van más allá de definir diccionarios, y nos permiten reutilizar código XAML aún más.

Un estilo nos permitirá establecer la forma en que los elementos se van a mostrar, definido directamente como un recurso que podemos utilizar a lo largo de toda la aplicación.

Ventajas

Ya hemos reutilizado bastante código XAML al definir recursos que reutilizamos en varios elementos, pero aún tuvimos por ejemplo que definir el valor del texto de los Entries en cada uno, y si el valor es el mismo, establecer estilos nos puede ahorrar una línea de código justo ahí. Por supuesto, este ahorro crece con nuestra aplicación, si tuviéramos decenas de Entries, bastaría con definir el estilo una vez.

Definiendo un estilo

Resolvamos el pequeño problema de estar duplicando el código que define el color del texto de los entries que tenemos en la aplicación. Recordarás que tanto para el Entry de usuario, como para el de contraseña y el de nombre de tarea, definimos un color de texto a ser exactamente el mismo recurso. Esto lo podemos hacer más eficiente definiendo que todos los entries deben tener ese color de texto, a través de un estilo en el archivo App.xaml (para que esté disponible en toda la aplicación):

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="accentColor">#293275</Color>
        <Color x:Key="buttonTextColor">#FFFFFF</Color>

        <Style TargetType="Entry">
            <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
        </Style>
    </ResourceDictionary>
</Application.Resources>

El resultado es que podemos, en todos los entries, quitar la línea que establece el color del texto, y aún mantener el mismo color, que esta vez se define desde el estilo.

Nota que para definir el estilo estableces el tipo en el que va a ser usado, en este caso definimos el objetivo como Entry. Hecho esto, se definen setters, cada uno con la propiedad a modificar y el valor que será asignado. En este ejemplo, he definido que el valor para la propiedad TextColor, será la del recurso que llamamos accentColor.

Ahora, este estilo se va a establecer automáticamente a todos los Entries que se definan en la aplicación, y era justo lo que necesitaba, pero ¿qué pasa si he modificado un poco la vista para agregar una nueva tarea para que se vea así?

Lo que necesito es que el primer label tenga un estilo diferente a la del segundo y tercero. Siempre podemos modificar directamente en la definición de un elemento, los valores que provienen del estilo. Por ejemplo, podríamos definir un estilo que aplique a todos los Labels, y en la definición de este primer Label, cambiar el tamaño de letra, o el color.

Pero regresamos al escenario al que esto no nos permite reutilizar estos estilos. Lo conveniente sería definir un estilo para Labels de título y otro para Labels de subtítulo, y así si podría reutilizarlos la próxima vez que requiera el mismo estilo. Para esto, en la definición del estilo, tendremos que establecer el Key, tal como lo hicimos con los recursos:

<Style x:Key="titleLabel" TargetType="Label">
    <Setter Property="FontSize" Value="25"/>
    <Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="subtitleLabel" TargetType="Label">
    <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
</Style>

Ahora que tienen una clave para ser identificados, los estilos no son asignados automáticamente a los Labels que están definidos en la aplicación, tendremos que asignarlos manualmente, para que cada elemento sepa que estilo debe usar:

<Label Text="Nueva tarea"
       Style="{StaticResource titleLabel}"/>
<Label Text="Nueva tarea"
       Style="{StaticResource subtitleLabel}"
       Grid.Row="1"/>
<Entry x:Name="nombreEntry"
       Grid.Row="2"
       Placeholder="Nombre de la tarea"
       Text="Tarea 1"
       Grid.ColumnSpan="2"/>
<Label Text="Nueva tarea" 
       Grid.Row="3"
       Style="{StaticResource subtitleLabel}"/>
...

Así hemos definido dos estilos orientados al mismo tipo de elemento (Label) y lo hemos asignado a los elementos correspondientes, para un resultado como este:

Ahora, si necesitamos cambiar algo por ejemplo a las etiquetas de texto para los subtítulos, sólo lo hacemos en el estilo definido en los recursos de la aplicación:

<Style x:Key="subtitleLabel" TargetType="Label">
    <Setter Property="FontSize" Value="13"/>
    <Setter Property="TextColor" Value="{StaticResource accentColor}"/>
</Style>

Y los cambios se aplicarán: