XAML: estilos

El marco XAML proporciona varias estrategias para personalizar y personalizar la apariencia de una aplicación. Los estilos nos brindan la flexibilidad de establecer algunas propiedades de un objeto y reutilizar estas configuraciones específicas en varios objetos para una apariencia consistente.

En los estilos, puede establecer solo las propiedades existentes de un objeto, como Alto, Ancho y Tamaño de fuente.
Solo se puede especificar el comportamiento predeterminado de un control.
Se pueden agregar varias propiedades en un solo estilo.

Los estilos se utilizan para dar un aspecto uniforme a un conjunto de controles. Los estilos implícitos se utilizan para aplicar una apariencia a todos los controles de un tipo determinado y simplificar la aplicación.

Imagine que tenemos tres botones y todos tienen que verse iguales: el mismo ancho y alto, el mismo tamaño de fuente y el mismo color de primer plano. Podemos establecer todas esas propiedades en los elementos del botón y eso sigue estando bastante bien para todos los botones, como se muestra en el siguiente diagrama.

Pero en una aplicación de la vida real, normalmente tendrás muchos más de estos que deben verse exactamente iguales. Y no solo los botones, por supuesto, normalmente querrá que sus bloques de texto, cuadros de texto y cuadros combinados, etc., tengan el mismo aspecto en su aplicación. Seguramente debe haber una mejor manera de lograr esto: se conoce comostyling. Puede pensar en un estilo como una forma conveniente de aplicar un conjunto de valores de propiedad a más de un elemento, como se muestra en el siguiente diagrama.

Veamos el ejemplo que contiene tres botones que se crean en XAML con algunas propiedades.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

Cuando mire el código anterior, verá que para todos los botones, la altura, el ancho, el color de primer plano, el tamaño de fuente y las propiedades de los márgenes siguen siendo los mismos. Cuando el código anterior se compila y ejecuta, mostrará la siguiente salida:

Ahora echemos un vistazo al mismo ejemplo, pero esta vez usaremos style.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

Los estilos se definen en el diccionario de recursos y cada estilo tiene un identificador de clave único y un tipo de destino. Dentro de <style>, puede ver que se definen múltiples etiquetas de establecimiento para cada propiedad que se incluirá en el estilo.

En el ejemplo anterior, todas las propiedades comunes de cada botón ahora están definidas en estilo y luego el estilo se asigna a cada botón con una clave única estableciendo la propiedad de estilo a través de la extensión de marcado StaticResource.

Cuando se compila y ejecuta el código anterior, producirá la siguiente ventana que es la misma salida.

La ventaja de hacerlo así es inmediatamente obvia. Podemos reutilizar ese estilo en cualquier lugar de su alcance, y si necesitamos cambiarlo, simplemente lo cambiamos una vez en la definición de estilo en lugar de en cada elemento.

En qué nivel se define un estilo, instantáneamente limita el alcance de ese estilo. Entonces, el alcance, es decir, dónde puede usar el estilo, depende de dónde lo haya definido. El estilo se puede definir en los siguientes niveles:

No Señor	Niveles y descripción
1	Nivel de control La definición de un estilo en el nivel de control solo se puede aplicar a ese control en particular.
2	Nivel de diseño La definición de un estilo en cualquier nivel de diseño solo puede ser accesible por ese diseño y solo por sus elementos secundarios.
3	Nivel de ventana Todos los elementos de esa ventana pueden acceder a la definición de un estilo a nivel de ventana.
4	Nivel de aplicación La definición de un estilo en el nivel de la aplicación lo hace accesible en toda la aplicación.

↰ Previous page Next page ↱