Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

En ocasiones nos encontramos con dos o más estilos que definen los mismos setters o algunos de ellos son iguales. En algunos casos podemos evitar esta duplicidad de setters utilizando la herencia en los estilos gracias a la propiedad "BasedOn". De esta manera podremos extraer esos setters que son comunes a dos o varios estilos y agruparlos en un estilo base para no tener que repetirlos. El mantenimiento del código siempre será más fácil si no tenemos que repetir las cosas.

En resumen, si un estilo A estaba basado en un estilo B (o si A hereda de B) el estilo A recibe los setters del estilo B como si estuvieran definidos en el mismo estilo A.

Debemos tener presentes algunas reglas al implementar herencia entre estilos:

  • Para heredar de un estilo se utiliza la propiedad "BasedOn" apuntando a la llave (Key) del estilo base.
  • No importa que el estilo base tenga definido el tipo de elemento al que aplica (TargetType), los estilos que heredan de este también deben definir el "TargetType".
  • Si un setter en el estilo que hereda se repite en el estilo base, lo que puede ser válido en algunos casos, siempre se utiliza el setter del estilo que hereda.
  • Solo se puede heredar de un estilo base si los tipos (TargetType) del estilo y la base son compatibles, esto es, si son iguales, ó, en términos de tipos de datos, el "TargetType" del estilo hereda en algún momento el "TargetType" del estilo base. De esto veremos un ejemplo más adelante.
EJEMPLO 1

A continuación observamos el ejemplo más simple de herencia donde dos estilos, "EstiloRojo" y "EstiloVerde", heredan los setters de un estilo base llamado "EstiloBase". Estos estilos definen dos posibles presentaciones para controles del tipo TextBlock, una de color Rojo y otra de color Verde pero ambas presentan ese control con las mismas dimensiones (100 x 20), lo que aquí corresponde a los setters heredados:

1: <Stylex:Key="EstiloBase"TargetType="TextBlock"> 2: <SetterProperty="Width"Value="100"/> 3: <SetterProperty="Height"Value="20"/> 4: Style> 5:  6: <Stylex:Key="EstiloRojo"BasedOn="{StaticResource EstiloBase}"TargetType="TextBlock"> 7: <SetterProperty="Foreground"Value="Red"/> 8: Style> 9:  10: <Stylex:Key="EstiloVerde"BasedOn="{StaticResource EstiloBase}"TargetType="TextBlock"> 11: <SetterProperty="Foreground"Value="Green"/> 12: Style>
EJEMPLO 2

Es posible implementar herencia cuando el TargetType del estilo y la base son compatibles, esto es, se presenta una herencia de tipos. Al interior del Framework el tipo "Shape" hereda de "FrameworkElement" por lo tanto en este ejemplo el "EstiloBase2" puede basarse en "EstiloBase1". A su vez el tipo "Ellipse" hereda de "Shape" de modo que el "EstiloElipse" puede basarse en "EstiloBase2":

1: <Stylex:Key="EstiloBase1"TargetType="FrameworkElement"> 2: <SetterProperty="Width"Value="100"/> 3: <SetterProperty="Height"Value="100"/> 4: Style> 5:  6: <Stylex:Key="EstiloBase2"TargetType="Shape"BasedOn="{StaticResource EstiloBase1}"> 7: <SetterProperty="Fill"Value="Red"/> 8: Style> 9:  10: <Stylex:Key="EstiloElipse"TargetType="Ellipse"BasedOn="{StaticResource EstiloBase2}"> 11: <SetterProperty="StrokeThickness"Value="10"/> 12: Style>

PARA SABER MÁS… Quickstart: styling controls