Introducción:
La idea es definir un estilo que vamos a aplicar a ciertos controles, en este
ejemplo ese control de destino será un botón, pero es aplicable a otros
controles, e incluso de forma genérica a todos los controles.
Antes de entrar en detalles veamos un ejemplo y después te explico qué es lo
que hace este código XAML, porque en este artículo todo será con código XAML y
no habrá ni una sola línea de código en Visual Basic o C#.
Definir un estilo a nivel de toda la ventana (Window)
Los estilos se pueden definir en ciertos controles contenedores, pero para
este ejemplo, lo voy a definir a nivel de la ventana (Window),
más que nada para que sepas que debes definirlo "antes" de otras propiedades de
la ventana, por ejemplo, antes de Window.Background, si no lo
haces así, te dará un error.
En el siguiente código se define un estilo llamado "btnPeque" para aplicar a
los controles de tipo Button.
<Window.Resources>
<Style x:Key="btnPeque" TargetType="{x:Type Button}">
<Setter Property="Width" Value="22" />
<Setter Property="Margin" Value="2, 0, 0, 0"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
</Window.Resources>
Como el estilo se aplicará a toda la ventana, es decir, a los controles de
tipo Button que estén en la ventana y que quieran usar este
estilo, lo definimos en Window.Resources.
El tipo de control al que se aplicará este estilo es el indicado por
TargetType. En este caso es para el tipo Button. Todo
esto se indica en el "nodo" Style.
Dentro de Style debemos indicar los "setters" es decir, los
nombres de las propiedades y los valores que se asignarán. En este ejemplo, se
asignará un valor 22 al ancho del botón, el margen será de 2,0,0,0 y la
alineación vertical será arriba.
Debemos tener en cuenta que las propiedades que podemos indicar en cada
estilo deben ser propiedades que existan en el "target type" (tipo de destino),
de no ser así... ¡nos enteraremos! ;-)))
Aplicar el estilo a un control
Una vez que hemos definido el estilo, al que hemos llamado btnPeque y que
será aplicable a los botones, debemos indicar qué botón lo usará. Esto lo
hacemos en el código que define los botones. Por ejemplo:
<Button Name="btnPlay" Style="{StaticResource btnPeque}" Content=">" />
Es decir, usamos Style="{StaticResource nombre}" para
aplicar ese estilo al control que queramos.
Decir que si no usamos Style en un botón, la forma en que se
mostrará será la normal o la que se haya indicado para todos los botones.
Estilos para varios tipos de controles
Si en lugar de aplicar el estilo solo a los botones queremos que sea a
cualquier control, lo primero que debemos hacer es indicar en TargetType
que es para Control.
Lo segundo es que las propiedades que indiquemos deben pertenecer a la clase
Control, si no... pues tendremos un bonito error.
Por ejemplo, este estilo define el color de fondo, el del texto y el tipo de
letra en negrita.
<Style x:Key="fondoNegro" TargetType="{x:Type Control}">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Lime" />
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Margin" Value="4,0"/>
</Style>
Debido a que el "target" es cualquier control, lo podemos aplicar a varios
tipos de controles, por ejemplo a una etiqueta y a un botón:
<Label Style="{StaticResource fondoNegro}" Content="Hola"/>
<Label Foreground="Tomato" Content="Mundo"/>
<Button Style="{StaticResource fondoNegro}" Content="Pulsa aquí"/>
Nuevamente te recuerdo que si no aplicamos ningún estilo a un control, se
usará el que esté predeterminado.
Y esto es todo por el momento, como de costumbre, espero que te sea de utilidad.
Nos vemos.
Guillermo