Reutilizar estilos en XAML es una de las técnicas más efectivas para reducir líneas de código repetitivo y mantener la coherencia visual en aplicaciones móviles con .NET MAUI. A partir de un ejercicio práctico sobre un grid layout, se demuestra paso a paso cómo crear estilos explícitos, convertirlos en estilos globales y aprovechar los estilos implícitos que ya vienen predefinidos en la plataforma.
¿Dónde se ubican los archivos de estilos y colores en un proyecto .NET MAUI?
Antes de escribir cualquier estilo, es fundamental conocer la estructura de carpetas del proyecto. Dentro de la carpeta Resource existe una subcarpeta llamada Styles que contiene dos archivos clave [0:44]:
- Styles.xaml: archivo donde se concentran los estilos predefinidos por .NET MAUI y donde puedes agregar los tuyos.
- Colors.xaml: un conjunto de colores globales definidos en un único lugar, listos para ser consumidos en toda la aplicación.
La ventaja de centralizar colores en Colors.xaml es clara: si necesitas cambiar un color, lo haces una sola vez y el cambio se refleja en todos los controles que lo utilicen [1:13].
¿Cómo crear un estilo explícito directamente en tu página XAML?
Partiendo de un frame que contiene etiquetas como Articles, Followers y Rating, se identifican propiedades repetidas en cada label: font size, text color, alineamiento horizontal y otras. Repetir estas propiedades en cada control es ineficiente y dificulta el mantenimiento [1:37].
Para extraer esas propiedades en un estilo explícito dentro de la misma página, se siguen estos pasos [2:04]:
- Abrir la sección
ContentPage.Resources y dentro colocar un ResourceDictionary.
- Declarar un
Style con el atributo x:Key (en este caso TitleStyle) y un TargetType que indica el control destino, por ejemplo Label.
- Agregar cada propiedad con etiquetas
Setter, especificando Property y Value.
xml
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="TitleStyle" TargetType="Label">
<Setter Property="FontSize" Value="11" />
<Setter Property="TextColor" Value="Gray" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
Una vez definido, se asigna al label con la sintaxis Style="{StaticResource TitleStyle}" [3:28]. Al recargar la aplicación, la interfaz permanece idéntica, pero el código es mucho más limpio.
¿Qué sucede cuando modificas una sola propiedad del estilo?
Para demostrar el poder de la reutilización, se agrega un BackgroundColor rojo al estilo. Inmediatamente los tres títulos cambian de apariencia con una única modificación [4:16]. Esto confirma que cualquier ajuste visual se propaga a todos los controles que compartan ese estilo.
¿Cómo convertir un estilo explícito en un estilo global accesible desde cualquier XAML?
Un estilo definido dentro de una página solo es accesible en esa página. Para que sea global, basta con mover las líneas del Style al archivo centralizado Styles.xaml [4:40].
- Corta el bloque
Style de tu página.
- Pégalo al final del archivo Styles.xaml dentro del proyecto.
- Conserva la misma referencia
StaticResource en tus labels.
Al reiniciar la aplicación con el color de fondo cambiado a amarillo, se comprueba que el estilo global funciona correctamente [5:11]. A partir de ese momento, cualquier archivo XAML del proyecto puede consumir ese estilo sin duplicar código.
¿Qué diferencia hay entre un estilo explícito y uno implícito?
El estilo explícito requiere un x:Key y se asigna manualmente a cada control. El estilo implícito, en cambio, solo necesita un TargetType sin nombre; se aplica automáticamente a todos los controles de ese tipo [5:42]. .NET MAUI ya incluye estilos implícitos predefinidos para controles como TabbedPage, con propiedades como BackgroundColor y BarTextColor listas para personalizar.
Antes de crear un estilo nuevo, verifica si ya existe uno predefinido en Styles.xaml. Todos los controles cuentan con su propio estilo base, y modificarlos ahorra tiempo considerable [6:08].
Experimenta con los estilos predefinidos de .NET MAUI y comparte en los comentarios qué combinaciones te han resultado más útiles para tus proyectos.
