[Windows 8] Trabajando con estilos en xaml

Una parte importante de toda aplicación escrita con XAML es el estilo de la misma, y XAML provee diferentes formas para dar un look and feel consistente a las aplicaciones, de tal manera que cada aplicación sea consistente en toda su navegación y tenga un sentido de pertenencia.

En XAML al igual que al trabajar con HTML, se tienen dos maneras principales para definir estilos:

· Estilos inline.

· Estilos en la misma página.

Así que revisemos las opciones:

Estilos inline

Los estilos inline como su nombre lo indica son aquellos estilos o propiedades visuales que son declaradas en el mismo sitio en que un control es declarado, este tipo de declaración prevalecen sobre los otros dos tipos de definición existentes, sin embargo se puede tener el problema de tener que repetir propiedades en diferentes controles que visualmente se verán igual, esto ocasiona un código xaml más extenso, más complejo y sobre mucho más difícil de mantener, en general se debe evitar este tipo de declaración. El siguiente ejemplo ilustra como asignar diferentes propiedades a algunos controles xaml:

   1:  <StackPanel>
   2:      <TextBlock x:Name="txtTitulo" Text="My App" FontSize="50" Foreground="LightGray"></TextBlock>    
   3:      <TextBlock x:Name="txtSubTitulo" Text="Home Page" FontSize="50" Foreground="LightGray"></TextBlock>
   4:      <Button x:Name="btn1" Content="Button 1" FontSize="40" Foreground="Green" Width="400"></Button>
   5:      <Button x:Name="btn2" Content="Button 2" FontSize="40" Foreground="Green" Width="400"></Button>
   6:  </StackPanel>

Lo anterior es solo un pequeño ejemplo de cómo es posible declarar las propiedades visuales de los controles inline, así mismo se observa que se están repitiendo propiedades con los mismos valores.

Estilos en la misma página

Otra forma de definir los estilos y propiedades de los controles, es creándolos en el mismo documento xaml, en este caso es necesario crearlos en el diccionario de la página, y definirles un TargeType, y será el TargeType el encargado de definir sobre que controles se crearán los estilos, reescribiendo los estilos del ejemplo anterior tenemos:

   1:  <Page.Resources>
   2:      <Style TargetType="Button">
   3:          <Setter Property="Width" Value="400"></Setter>
   4:          <Setter Property="FontSize" Value="40"></Setter>
   5:          <Setter Property="Foreground" Value="Green"></Setter>
   6:      </Style>
   7:      <Style TargetType="TextBlock">
   8:          <Setter Property="FontSize" Value="50"></Setter>
   9:          <Setter Property="Foreground" Value="LightGray"></Setter>
  10:      </Style>
  11:  </Page.Resources>
  12:  <Grid>
  13:      <StackPanel>
  14:          <TextBlock x:Name="txtTitulo" Text="My App"></TextBlock>    
  15:          <TextBlock x:Name="txtSubTitulo" Text="Home Page"></TextBlock>
  16:          <Button x:Name="btn1" Content="Button 1"></Button>
  17:          <Button x:Name="btn2" Content="Button 2"></Button>
  18:      </StackPanel>
  19:  </Grid>

Como se observa, en la parte superior dentro de Page.Resources se ha realizado la declaración de los estilos, utilizando el atributo TargetType para identificar sobre que tipo de elemento se aplicará dicho estilo, luego con la etiqueta Setter se establecen ya las propiedades y los valores de cada una; y como se puede observar en la definición de los TextBlock y de los Button no se hace referencia a ningún estilo, esto porque ya han sido declarados.

La anterior definición de estilos afectará a todos los elementos del tipo seleccionado, sin embargo se puede dar el caso que no todos los elementos del mismo tipo deben verse igual, y en este caso lo que se puede hacer es a cada estilo declararle un key con la propiedad x:key, y luego referenciar dicho estilo por medio de su key en la definición del control, dicha referencia se debe realizar en la propiedad style especificando que se trata de un recurso estático, el siguiente es el código anterior pero en este caso utilizando identificadores (x:key) en los estilos:

   1:   <Page.Resources>
   2:          <Style TargetType="Button" x:Key="EstiloBoton">
   3:              <Setter Property="Width" Value="400"></Setter>
   4:              <Setter Property="FontSize" Value="40"></Setter>
   5:              <Setter Property="Foreground" Value="Green"></Setter>
   6:          </Style>
   7:          <Style TargetType="TextBlock" x:Key="EstiloTextBlock">
   8:              <Setter Property="FontSize" Value="50"></Setter>
   9:              <Setter Property="Foreground" Value="LightGray"></Setter>
  10:          </Style>
  11:      </Page.Resources>
  12:      <Grid>
  13:          <StackPanel>
  14:              <TextBlock x:Name="txtTitulo" Text="My App" Style="{StaticResource ResourceKey=EstiloTextBlock}"></TextBlock>    
  15:          <TextBlock x:Name="txtSubTitulo" Text="Home Page" Style="{StaticResource ResourceKey=EstiloTextBlock}"></TextBlock>
  16:              <Button x:Name="btn1" Content="Button 1" Style="{StaticResource ResourceKey=EstiloBoton}"></Button>
  17:              <Button x:Name="btn2" Content="Button 2" Style="{StaticResource ResourceKey=EstiloBoton}"></Button>
  18:          </StackPanel>
  19:      </Grid>

Recordando lo mencionado, para enlazar el estilo a un control, en la definición del mismo, se utiliza la propiedad, se referencia como un recurso estático (StaticResource) y con ResourceKey se relaciona la key del estilo creado.

Espero es haya gustado el post, hasta la próxima!

6 comments

Leave a Reply

Your email address will not be published. Required fields are marked *