[Windows 8] Trabajando con estilos y herencia (BasedOn)

Posted on Actualizado enn


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:   <Style x:Key="EstiloBase" TargetType="TextBlock">
   2:     <Setter Property="Width" Value="100" />
   3:     <Setter Property="Height" Value="20" />
   4:  </Style>
   5:   
   6:  <Style x:Key="EstiloRojo" BasedOn="{StaticResource EstiloBase}" TargetType="TextBlock">
   7:     <Setter Property="Foreground" Value="Red" />
   8:  </Style>
   9:   
  10:  <Style x:Key="EstiloVerde" BasedOn="{StaticResource EstiloBase}" TargetType="TextBlock">
  11:     <Setter Property="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:   <Style x:Key="EstiloBase1" TargetType="FrameworkElement">
   2:     <Setter Property="Width" Value="100" />
   3:     <Setter Property="Height" Value="100" />
   4:  </Style>
   5:   
   6:  <Style x:Key="EstiloBase2" TargetType="Shape" BasedOn="{StaticResource EstiloBase1}">
   7:     <Setter Property="Fill" Value="Red" />
   8:  </Style>
   9:   
  10:  <Style x:Key="EstiloElipse" TargetType="Ellipse" BasedOn="{StaticResource EstiloBase2}">
  11:     <Setter Property="StrokeThickness" Value="10" />
  12:  </Style> 

PARA SABER MÁS… Quickstart: styling controls

Un comentario sobre “[Windows 8] Trabajando con estilos y herencia (BasedOn)

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

    […] [Windows 8] Trabajando con estilos y herencia (BasedOn) […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s