Definir y usar recursos

Un recurso es como una constante simbólica de un lenguaje de programación. Se define en un lugar y se hace referencia a él allá donde se necesite. Facilita la lectura del código gracias al empleo de un nombre descriptivo en lugar de un valor "mágico". Si necesita cambiar el valor, solo tiene que actualizar la definición.

En este módulo, verá cómo usar recursos para eliminar valores codificados de forma rígida del lenguaje XAML que se usa en la .NET Multi-Platform App UI (MAUI).

¿Qué es un recurso?

Un recurso es cualquier objeto que se puede compartir en la interfaz de usuario. Los ejemplos más comunes son las fuentes, los colores y los tamaños. Sin embargo, también puede almacenar objetos complejos, como las instancias de Style y OnPlatform como recursos.

Un recurso se define en XAML o en código. Luego se aplica en XAML o en código. Por lo general, trabajará completamente en XAML, aunque más adelante le mostraremos algunos casos donde el código resulta útil.

Considere este un ejemplo. Supongamos que desea usar los mismos valores de TextColor en los controles de una página. Si usa valores codificados de forma rígida, el XAML tiene un aspecto similar al siguiente. Observe cómo el valor del color del texto se repite en los dos controles.

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

En lugar de repetir el color del texto, puede definirlo como un recurso. La definición tiene un aspecto similar a este XAML:

<Color x:Key="PageControlTextColor">Blue</Color>

Observe cómo el elemento definido tiene una propiedad x:Key que proporciona al recurso un nombre. Usa esta clave para buscar el recurso en el XAML.

Para poder usar un recurso, primero debe almacenarlo en un diccionario de recursos.

¿Qué es un elemento ResourceDictionary?

ResourceDictionary es una clase de biblioteca MAUI de .NET personalizada para su uso con recursos de interfaz de usuario. Es un diccionario, por lo que almacena pares clave-valor. El tipo de la clave se limita a String, mientras que el valor puede ser cualquier objeto.

Cada página XAML de MAUI de .NET tiene una propiedad denominada Resources que puede contener un objeto ResourceDictionary . La propiedad es NULL de forma predeterminada, por lo que tiene que crear una instancia del diccionario para poder usarla. En el código siguiente se muestra cómo crearía un objeto ResourceDictionary y asignarlo a la propiedad Resources de un contentPage:

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

.NET MAUI XAML tiene una sintaxis de conveniencia integrada que crea automáticamente la instancia de diccionario siempre que empiece a usar la propiedad Resources . El ejemplo anterior se puede simplificar con el código siguiente:

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

Cada página de la aplicación puede tener su propio diccionario. Estos diccionarios específicos de la página se usan para almacenar los recursos que se emplean exclusivamente en esa página.

<Label Text="Hello, World!"
        ...
        <Label.Resources>
           ...
        </Label.Resources>
</Label>

Creación de un recurso

Para crear un recurso, se declara dentro de la propiedad Resources de una página. En el ejemplo siguiente se crea el recurso de color de texto que se describe anteriormente.

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

Cuando seleccione una clave para el recurso, elija un nombre que refleje el uso, en lugar del valor del recurso. Por ejemplo, para establecer el fondo de una etiqueta en Rojo, no use RedColor como clave, use BackgroundColor en su lugar.

Aplicar un recurso mediante un elemento StaticResource

StaticResource es una extensión de marcado para buscar recursos en un diccionario de recursos. Se proporciona la clave del recurso y la extensión de marcado devuelve el valor correspondiente. El siguiente marcado XAML muestra un ejemplo que crea y usa un Color recurso denominado PageControlTextColor. El marcado XAML para el control de etiqueta del ejemplo usa la extensión de marcado StaticResource para recuperar el valor.

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

...

<Label TextColor="{StaticResource PageControlTextColor}" ... />

La extensión se denomina StaticResource porque la extensión solo se evalúa una vez. La búsqueda en el diccionario se produce cuando se crea el objeto de destino. La propiedad de destino no se actualiza si cambia el valor del recurso en el diccionario.

Tipos intrínsecos de XAML

El ejemplo original presentado al principio de esta unidad establece la propiedad TextColor y la propiedad FontSize :

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

La propiedad FontSize tiene el tipo Double. Para crear un recurso para este valor, use uno de los tipos intrínsecos XAML definidos en la especificación XAML. La especificación XAML define nombres de tipo de muchos de los tipos simples de C#. En el código siguiente se muestran recursos de ejemplo de cada uno de los tipos intrínsecos.

<ContentPage.Resources>
    <x:String x:Key="...">Hello</x:String>
    <x:Char x:Key="...">X</x:Char>
    <x:Single x:Key="...">31.4</x:Single>
    <x:Double x:Key="...">27.1</x:Double>
    <x:Byte x:Key="...">8</x:Byte>
    <x:Int16 x:Key="...">16</x:Int16>
    <x:Int32 x:Key="...">32</x:Int32>
    <x:Int64 x:Key="...">64</x:Int64>
    <x:Decimal x:Key="...">12345</x:Decimal>
    <x:TimeSpan x:Key="...">1.23:5959</x:TimeSpan>
    <x:Boolean x:Key="...">True</x:Boolean>
</ContentPage.Resources>

Establecimiento de valores específicos de la plataforma para un recurso

Es habitual tener que ajustar ligeramente la interfaz de usuario de la aplicación entre plataformas. La manera estándar de definir los valores específicos de la plataforma es mediante un objeto OnPlatform cuando se define un recurso. Por ejemplo, en el código siguiente se muestra cómo se crea un recurso que hace referencia a diferentes colores de texto en iOS, Android, macOS (Mac Catalyst) y Windows (WinUI).

<ContentPage.Resources>
    <OnPlatform x:Key="textColor" x:TypeArguments="Color">
        <On Platform="iOS" Value="Silver" />
        <On Platform="Android" Value="Green" />
        <On Platform="WinUI" Value="Yellow" />
        <On Platform="MacCatalyst" Value="Pink" />
    </OnPlatform> 
</ContentPage.Resources>
...

<Label TextColor="{StaticResource textColor}" ... />