Crear y usar recursos para toda la aplicación

Completado

La definición de estilos y recursos en una página XAML es una manera excelente de reducir el código repetido. Pero hay un problema. Esos estilos y recursos solo están disponibles en esa página XAML concreta. Los diccionarios de recursos de nivel de página no bastan para evitar el código repetido en una aplicación si tiene varias páginas. En esta unidad verá cómo compartir estilos y recursos en todas las páginas de la aplicación.

Dónde hay diccionarios de recursos disponibles

La clase VisualElement define la propiedad Resources. Los controles, las páginas y los diseños se heredan de VisualElement, por lo que todos tienen una propiedad Resources que puede contener un diccionario de recursos.

La clase Application también define una propiedad Resources. Application no se hereda de VisualElement, por lo que la propiedad se define como parte de esta clase.

En la ilustración siguiente se muestra la estructura de una aplicación típica. Todos los elementos mostrados tienen una propiedad Resources que puede contener un diccionario de recursos.

Nota:

Este diagrama muestra una representación simplificada de cómo se organizan los elementos de una aplicación. En este diagrama, el término View hace referencia a un control singleton, como Button o Label, que no actúa como contenedor de ningún control secundario. Además, el término Layout implica un contenedor que es responsable de organizar el diseño de sus controles secundarios. Un diseño se puede anidar. Por ejemplo, un control de cuadrícula podría mantenerse dentro de un control StackLayout.

Cómo definir estilos y recursos para toda la aplicación

Los estilos y recursos para toda la aplicación se definen en el archivo XAML asociado a la clase Application. El código siguiente muestra cómo declarar un recurso Color en el diccionario de recursos de la aplicación.

<Application.Resources>
    <Color x:Key="MyTextColor">Blue</Color>
</Application.Resources>

Cómo .NET MAUI localiza un recurso o estilo

Imagine que aplica un recurso a uno de los controles, como se muestra en el código siguiente.

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

.NET MAUI tiene que buscar la definición de ese recurso para poder aplicar el valor. Una única aplicación puede tener muchos diccionarios. ¿Qué diccionarios buscará .NET MAUI y en qué orden? Para responder a estas preguntas, ayuda a imaginarse las instancias de VisualElement en las páginas como una estructura con forma de árbol. La aplicación se encuentra en la raíz y las páginas, los diseños y las vistas se extienden por debajo. Esta estructura se suele denominar árbol visual. Cada elemento del árbol puede tener su propio diccionario, que puede contener recursos. El algoritmo de búsqueda de estilo en .NET MAUI muestra el árbol visual:

1. Comience la búsqueda por el diccionario de la instancia VisualElement a la que se ha aplicado el recurso. En el ejemplo anterior, la búsqueda comienza con el tipo Label. Si no hay ningún diccionario de recursos, o si lo tiene pero el recurso no existe, la búsqueda continúa.

2. Desplácese al elemento primario del (control) y repita la búsqueda. Normalmente, el siguiente lugar en el que se busca es un diseño.

3. Busque en el elemento primario del diseño. Normalmente, el siguiente lugar en el que se busca es la página, aunque si un diseño se anida dentro de otro diseño (por ejemplo, una cuadrícula dentro de un StackLayout), la búsqueda subirá el árbol al diseño primario.

4. Busque la clase Application en el diccionario.

La búsqueda devuelve el primer elemento encontrado con un valor x:Key coincidente. En la imagen siguiente se resume la secuencia de búsqueda del recurso.

En la práctica, la mayoría de los desarrolladores omite la propiedad Resources en las vistas y los diseños. Usan los diccionarios de nivel de página para los elementos que emplean en una sola página. Los estilos y recursos que quieren compartir en varias páginas se definen para toda la aplicación. Después, el proceso de búsqueda solo tiene que buscar dos diccionarios: el de la instancia de página actual y el de la aplicación.

Nota:

Si no se encuentra un recurso con la clave especificada, la aplicación usará valores predeterminados para el estilo.

Claves duplicadas

Cada instancia ResourceDictionary es independiente, lo que significa que el mismo valor x:Key se puede usar en más de un diccionario. El hecho de tener el mismo valor x:Key en varios diccionarios de la ruta de búsqueda no provoca ningún error. El recurso asociado al primer valor x:Key coincidente de la ruta de acceso es el que se usa.

Por ejemplo, supongamos que tiene el siguiente recurso definido en la clase Application:

<Application.Resources>
    <x:String x:Key="msg">Two</x:String>
</Application.Resources>

Después, define el recurso siguiente en un objeto ContentPage y lo aplica a un objeto Label en esa misma página:

<ContentPage.Resources>
    <x:String x:Key="msg">One</x:String>
</ContentPage.Resources>
...
<Label Text="{StaticResource msg}">

Como se usa el primer valor x:Key coincidente, la propiedad Text se establece en One.