Estilos y Templates en WPF

Cuando realizamos una aplicación WPF una gran ventaja que tenemos es la posibilidad de definir estilos para cualquier control. Un estilo es una serie de parejas propiedad/valor, que serán aplicadas a una serie de elementos, es decir podemos definir para cada propiedad de un control un valor que será el que se aplique. La idea es parecida a los CSS del desarrollo web. Esto te da las ventajas de :

• Reducir redundancia en tu código
• Cambiar la apariencia de los controles en un solo punto
• Poder cambiar el estilo de tus controles en tiempo de ejecución

Imaginemos que en nuestra aplicación queremos que todos los botones sean de fondo naranja, con letra italica , un margen determinado, bueno un estilo para un botón. La definición del estilo sería:

 

 <Style x:Key="miBoton" TargetType="Button">
            <Setter Property="Background" Value="Orange" />
            <Setter Property="FontStyle" Value="Italic" />
            <Setter Property="Padding" Value="8,4" />
            <Setter Property="Margin" Value="4" />
  </Style>

Los estilos se definen como recursos así que o van en la propia ventana en la sección Windows.Resources o en un diccionario de recursos que suele ser lo habitual y lo aconsejable.

Cuando queremos que botón aplique este estilo se lo debemos decir en la propiedad Style

<Button Style="{StaticResource myStyle}">Estilo Aplicado</Button> 

Una caracteristica interesante de los estilos es que tienen herencia gracias a la propiedad del estilo BasedOn, si quiero otro estilo con la letra en negrita seria tan sencillo como

<Style x:Key="boldStyle" BasedOn="{StaticResource miBoton}"  TargetType="Button">
           <Setter Property="FontWeight" Value="Bold" />
        </Style>

 

 

Además de customizar un control a través de sus propiedades, podemos reemplazarlo por algo completamente diferente, a través de un Control Template.

Cada control tiene un template por defecto , que le da la apariencia básica, el template esta definido en cada control en la Dependency Property  Template . Con un Control Template podemos reemplazar totalmente el árbol visual de un control. Por ejemplo un Botón su árbol visual es el siguiente

 

Muchas veces podemos cambiar el Template a partir de un Stylo, modificando la propiedad Template, lo mejor con un ejemplo

 

<Style x:Key="CircularStyle" BasedOn="{StaticResource miBoton}" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse Fill="{TemplateBinding Background}"
                             Stroke="{TemplateBinding BorderBrush}"/>
                            <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

 

Si aplicamos el estilo

 

Como podéis observar ahora el botón, es circular

 

Para que veais un ejmplo mas completo os dejo el código de la aplicación de arriba y he añadido un Diccionario de Recursos que hace un checkbox como el de un IPhone