Recursos en XAML

Hasta ahora la aplicación que desarrollamos está utilizando estilos por defecto de los elementos que estamos usando. Pero imagina el escenario en el que quieres que todos los botones tengan el mismo color de fondo, que todas las etiquetas de texto tengan un tamaño específico y usen un tipo de letra diferente al por default, o que tengas colores que se deben usar a lo largo de toda la aplicación en diferentes elementos.

La solución directa que puede venirte a la mente es agregar, dentro de la definición XAML de cada uno de los elementos, un valor para las propiedades correspondientes. Sin embargo, esta no es una solución viable para un proyecto que tiene varios botones, muchas etiquetas de texto o demasiados elementos en los cuales ocupar el mismo color.

En este punto entran los recursos en XAML, que hacen que ciertos elementos estén disponibles dentro de su ámbito. Podemos pensar de los recursos como algo similar a las propiedades en C#, y que estarán disponibles para su uso y re-uso a lo largo de su ámbito, por ejemplo una página, o la aplicación completa.

¿Qué es XAML?

Definiendo recursos

Para definir recursos, abre la página de inicio de sesión en el proyecto de ToDo, vamos a definir como recursos algunos colores que la app va a usar.

Así como un ContentPage tiene una propiedad Content, también tiene una de Resources, que podemos definir así:

<ContentPage.Resources>
    <ResourceDictionary>
            
    </ResourceDictionary>
</ContentPage.Resources>

Dentro de esta definición podremos definir recursos que estarán disponibles en todo el ContentPage. Nota que dentro de los recursos, estamos definiendo un diccionario de recursos, un diccionario se identifica porque tiene una llave y tiene un valor, y será exactamente lo que definiremos. Cada recurso se identificará por un key, y se le asignará un valor, por ejemplo, si queremos definir un color, deberemos hacer lo siguiente:

<Color x:Key="accentColor">#7FC719</Color>

Primero hemos establecido el tipo de recurso que usaremos, en este caso, Color. Después definimos el valor de la llave, que será accentColor, y nos ayudará a identificar el recurso para usarlo. Finalmente, definimos el valor del recurso con un valor hexadecimal en el caso de un color.

Ahora, podremos usar este recurso a través de su key como valor del color de cualquier elemento.

Usando un recurso

Una vez definido el recurso, podemos asignarlo como valor de cualquier propiedad que acepte ese tipo. En el caso del recurso accentColor, podemos asignarlo a propiedades que establecen color de algún elemento, por ejemplo el color de background del botón. Para acceder a un recurso deberemos hacer uso de la siguiente sintaxis, así como de StaticResource:

BackgroundColor="{StaticResource accentColor}"

Hacer esto dentro del botón dará estos resultados:

Por supuesto, podemos seguir definiendo nuevos recursos y utilizarlos de forma similar. Por ejemplo un recurso para el color de texto del botón:

<Color x:key="buttonTextColor">#FFFFFF</Color>

Para usarlo de esta manera:

TextColor="{StaticResou![](url)rce buttonTextColor}"

Para obtener este resultado:

Ventajas

¿Cuál es la ventaja de usar los recursos? Simple, podemos reutilizarlos a lo largo de toda la página, o incluso toda la aplicación. Imagina que has utilizado este recurso en algunos otros elementos:

<Entry x:Name="nombreEntry"
       Text="Tarea 1"
       Placeholder="Nombre de la tarea"
       TextColor="{StaticResource accentColor}"
       Grid.ColumnSpan="2"/>
<DatePicker x:Name="fechaDatePicker"
            TextColor="{StaticResource accentColor}"
            Grid.Row="1"/>
<TimePicker x:Name="horaTimePicker"
            TextColor="{StaticResource accentColor}"
            Grid.Row="1"
            Grid.Column="1"/>
<Button Text="Guardar"
        BackgroundColor="{StaticResource accentColor}"
        TextColor="{StaticResource buttonTextColor}"
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Clicked="Handle_Clicked”/>

Después de haber definido este color como el color de acento, quieres cambiarlo. De no haber usado el recurso, tendrías que ir a cada elemento y cambiar el color. Pero como has usado un recurso que se está reutilizando en cada lugar necesario, basta con cambiar su valor para que los cambios se apliquen:

<Color x:Key="accentColor">#293275</Color>