Definición
Podríamos definir estilo como el aspecto visual que va a tener un elemento dentro de nuestra Interfaz de Usuario.
Será un fragmento de XAML que podremos establecer de alguna de las siguientes maneras:
Formas de Establecer Estilos y Plantillas
=> Modificando las propiedades: La forma “tradicional” de cambiar el aspecto sería modificando las propiedades directamente desde el XAML, o la ventana de propiedades para aquellas donde es factible hacerlo.
Ejemplo:
1: <Button Name="boton" Margin="188,127,191,166">
2: <Button.Background>
3: <SolidColorBrush Opacity="0.7" Color="Green"></SolidColorBrush>
4: </Button.Background>
5: </Button>
=> Agregando un aparatado de recursos a nuestra ventana / UserControl:
1: <Window.Resources>
2: <Style x:Key="botoncito" TargetType="Button">
3: <Setter Property="Background">
4: <Setter.Value>
5: <SolidColorBrush Opacity="0.7" Color="Green"></SolidColorBrush>
6: </Setter.Value>
7: </Setter>
8: </Style>
9: </Window.Resources>
10: <Grid>
11: <Button Name="boton" Margin="188,127,191,166" Style=”{StaticResource botoncito}”/>
12: </Grid>
De esta manera lograremos que todos los botones dentro de esta ventana tengan el mismo estilo, a no ser que indiquemos lo contrario con:
1: <Button Name="boton2" Margin="188,240,191,53" Style="{x:Null}"/>
O Indiquemos otro estilo concreto:
1: <Button Name="boton3" Margin="188,240,191,53" Style="{StaticResource botoncito2}"/>
=>Agregando nuestros estilos al fichero App.xaml dentro del Apartado Application.Resources:
1: <Application.Resources>
2: <Style x:Key="botoncito" TargetType="Button">
3: <Setter Property="Background">
4: <Setter.Value>
5: <SolidColorBrush Opacity="0.7" Color="Green"></SolidColorBrush>
6: </Setter.Value>
7: </Setter>
8: </Style>
9: </Application.Resources>
De esta forma los estilos estarán disponibles para ser utilizados desde todas las partes de la aplicación.
=> Agregando un fichero de Recursos: Creo que la mejor forma de trabajar con estilos es definir una fichero de Recursos desde la solución de VS, agregando un fichero del tipo “Resources Dictionary”, donde definiremos nuestros estilos:
1: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
3: <Style x:Key="botoncito" TargetType="Button">
4: <Setter Property="Background">
5: <Setter.Value>
6: <SolidColorBrush Opacity="0.7" Color="Green"></SolidColorBrush>
7: </Setter.Value>
8: </Setter>
9: </Style>
10: </ResourceDictionary>
Y para que podamos utilizarlos en toda la aplicación, dentro del fichero App.xaml,en el apartado de recursos indicaremos la siguiente línea:
1: <Application.Resources>
2: <ResourceDictionary Source="Dictionary1.xaml"/>
3: </Application.Resources>
Información Útil de los Estilos
A la hora de definir un estilo es necesario que indiquemos algunas cosas:
– TargetType: es el control tipo cuyo estilo queremos personalizar. Al establecer, cuando vayamos a definir los estilos, podremos tener ayuda para ver que propiedades se pueden establecer.
– Name / Key: El nombre o la clave nos va a permitir identificar los estilos que estamos aplicando. Si establecemos la propiedad “Name”, todos los controles del tipo indicado, establecerá su estilo al definido, a no ser que indiquemos lo contrario. En cambio, si utilizamos “Key”, será necesario establecer la propiedad Style asignándola a un recursos estático a través de Binding.
Espero que os sea de utilidad.
Saludos!