Contenido del curso
Instalando Visual Studio 2022
Conociendo el XAML y su estructura
Pages
Layouts
- 12

StackLayout y Frame para tarjetas en MAUI
12:52 min - 13

Superponer controles con AbsoluteLayout en MAUI
15:28 min - 14

Diseño de Interfaces con Grid en Visual Studio
14:05 min - 15

Desarrollo de Interfaces con Grid en Visual Studio: Práctica Guiada
19:14 min - 16

Propiedades clave de Flex Layout en MAUI
13:15 min - 17

Implementación de FlexLayout en UI: Descomposición y Codificación
09:20 min
Estilos
Reto de UI con .NET MAUI
Estilos en XAML para no repetir código
Resumen
Si alguna vez copiaste y pegaste las mismas diez propiedades de un label a otro solo para cambiar el texto, los estilos en XAML son justo lo que necesitas. Aprenderás qué son, cómo se estructuran y qué tipos existen para que tu interfaz quede limpia y mantenible, sin repetir código innecesario.
¿Qué son los estilos en XAML y para qué sirven?
Un estilo es un conjunto de propiedades visuales que defines una sola vez y reutilizas en todos los controles que lo necesiten. En lugar de repetir color, fuente, tamaño y márgenes en cada botón o label, los agrupas bajo un mismo bloque y se los asignas a cualquier control compatible.
¿Para qué sirven los estilos en XAML? Sirven para centralizar las características visuales de tus controles, evitar código duplicado y mantener una apariencia consistente en toda la UI.
La idea central es simple: defines la apariencia una vez y la aplicas a tantos controles como quieras.
¿Cómo es la estructura básica de un estilo en XAML?
La estructura arranca con un ResourceDictionary, que es el contenedor donde viven todos tus recursos. Dentro puedes guardar estilos, e incluso colores que repites mucho a lo largo del proyecto.
Dentro del ResourceDictionary abres una etiqueta Style, que marca el inicio de la definición. Esta etiqueta trabaja con dos propiedades clave:
- Key: el nombre que le das al estilo para invocarlo después. La usas o no, dependiendo del tipo de estilo.
- TargetType: el tipo de control al que aplicará. Si quieres estilizar botones, va Button; si son labels, va Label.
Dentro del Style agregas etiquetas Setter, una por cada propiedad que quieras afectar. Cada Setter necesita:
- Property: la propiedad que vas a modificar, por ejemplo BackgroundColor.
- Value: el valor que tomará esa propiedad, por ejemplo Red.
Un detalle importante: la propiedad que pongas en Setter debe existir en el control definido como TargetType. No todas las propiedades están disponibles para todos los controles.
¿Qué tipos de estilos existen en XAML?
Existen tres tipos de estilos y cada uno resuelve un escenario distinto. Conocerlos te ayuda a decidir cuál usar según el alcance que necesites.
¿Cómo funcionan los estilos explícitos?
Los estilos explícitos son los que defines con un nombre específico mediante la propiedad Key. Tú decides a qué control aplicarlo invocando ese nombre desde el control con StaticResource.
Esto te da control total: solo los controles que tú indiques tomarán ese estilo, aunque sean del mismo tipo que otros en pantalla.
¿Cómo funcionan los estilos implícitos?
Los estilos implícitos tienen la misma estructura, pero no llevan la propiedad Key. Su comportamiento es automático: se aplican a todos los controles que coincidan con el TargetType definido.
Imagina una pantalla con tres botones. Si declaras un estilo implícito con TargetType="Button", los tres botones tomarán esas características al instante, sin que tengas que asignarles nada.
¿Cuál es la diferencia entre estilo explícito e implícito? El explícito se aplica solo a los controles que lo invocan por su Key. El implícito se aplica automáticamente a todos los controles del TargetType indicado.
Tanto los explícitos como los implícitos se declaran dentro del XAML de la página en la que estás trabajando, así que su alcance queda limitado a ese archivo.
¿Por qué los estilos globales son los más potentes?
Los estilos globales son los favoritos para optimizar código a gran escala. Funcionan igual que los explícitos o implícitos en estructura, pero su alcance cambia: están disponibles para todo el proyecto, no solo para un XAML.
La diferencia se ve en dos momentos de su ciclo:
- Un estilo no global solo vive en el XAML donde lo declaraste.
- Un estilo global se declara en un archivo de recursos accesible desde todo el proyecto y queda disponible en cada página.
Esto significa que defines una vez el estilo de tus botones y aplica en cada pantalla de la app, sin volver a escribirlo. Menos código repetido, más consistencia visual y mantenimiento mucho más simple.
¿Qué conceptos clave debes recordar antes de aplicar estilos?
Antes de pasar a la práctica, vale la pena fijar las piezas que mueven todo el sistema:
- ResourceDictionary: el contenedor donde viven tus estilos y otros recursos como colores reutilizables.
- Style con TargetType: define a qué tipo de control aplica el estilo.
- Setter con Property y Value: cada propiedad visual que quieres afectar y su valor.
- Key: el identificador que diferencia un estilo explícito de uno implícito.
- StaticResource: la forma de invocar un estilo explícito desde un control.
Con estas piezas ya tienes el mapa completo. En la siguiente clase tomarás una UI construida antes y la optimizarás aplicando estos tres tipos de estilos en código real.
¿Cuál crees que vas a usar más en tu próximo proyecto: explícitos, implícitos o globales? Cuéntame en los comentarios.