WPF - Estilos

.NET framework 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 múltiples objetos para una apariencia consistente.

En los estilos, puede establecer solo las propiedades existentes de un objeto, como Alto, Ancho, Tamaño de fuente, etc.
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. Imagina tres botones, todos tienen que verse iguales, con el mismo ancho y alto, el mismo tamaño de fuente, el mismo color de primer plano, etc. Podemos establecer todas esas propiedades en los elementos del botón y eso sigue estando bien para todos los botones. Eche un vistazo al siguiente diagrama.

Pero en aplicaciones de la vida real, normalmente tendrá 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. se vean iguales en toda su aplicación. Seguramente, debe haber una mejor manera de lograrlo y se la 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. Eche un vistazo al siguiente diagrama.

Ejemplo

Tomemos un ejemplo sencillo para entender este concepto. Empiece por crear un nuevo proyecto de WPF.

Arrastre tres botones de la caja de herramientas a la ventana de diseño.
El siguiente código XAML crea tres botones y los inicializa con algunas propiedades.

<Window x:Class = "WPFStyle.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: WPFStyle" 
   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 son iguales. Ahora, cuando se compile y ejecute el código anterior, se mostrará la siguiente ventana.

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 compile y ejecute el código anterior, mostrará la siguiente ventana (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. Los estilos se pueden 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. A continuación se muestra un ejemplo de un nivel de control donde el botón y TextBlock tienen su propio estilo.
2	Nivel de diseño La definición de un estilo en cualquier nivel de diseño hará que sea accesible solo para ese diseño y sus elementos secundarios.
3	Nivel de ventana La definición de un estilo a nivel de ventana puede hacer que sea accesible para todos los elementos de esa ventana.
4	Nivel de aplicación La definición de un estilo a nivel de aplicación puede hacer que sea accesible en toda la aplicación. Tomemos el mismo ejemplo, pero aquí colocaremos los estilos en el archivo app.xaml para que sea accesible en toda la aplicación.

↰ Previous page Next page ↱