[Windows 8] Plantillas en xaml

Posted on


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

Twitter: @xamlparaadeptos

MODIFICANDO LA PRESENTACIÓN DE LOS CONTROLES Y LOS DATOS

Uno de los grandes pilares en la filosofía XAML es la posibilidad de tener una completa desconección entre la lógica de negocio y la presentación de los datos. Esto nos permite alterar completamente la apariencia de un control sin la desventaja de perder la funcionalidad que lo soporta, o sea, la lógica que lo hace trabajar. Por supuesto, aunque podemos definir la apariencia de un control de forma independiente, siempre será más cómodo y práctico hacerlo al interior de un estilo.

En resumen, es posible alterar la completa apariencia de un control o el aspecto con que presenta sus datos.

ALTERAR LA APARIENCIA DE UN CONTROL

Casi todos los controles en XAML heredan del tipo Control que tiene la propiedad Template del tipo ControlTemplate. Cuando asignamos un ControlTemplate a esta propiedad, directamente o utilizando un estilo, estamos alterando completamente la apariencia del control.

EJEMPLO 1

En este ejemplo alteramos directamente la apariencia de un botón asignando un nuevo ControlTemplate a la propiedad Template. El botón, y solo este botón, ahora se observará como un círculo amarillo:

   1:  <Button>
   2:     <Button.Template>
   3:        <ControlTemplate>
   4:           <Ellipse Width="100" Height="100" Fill="Yellow" />
   5:        </ControlTemplate>
   6:     </Button.Template>
   7:  </Button>

EJEMPLO 2

Aquí se aplica un template que está definido dentro de un diccionario de recursos:

 

   1:   <ControlTemplate x:Key="PlantillaBoton">
   2:     <Ellipse Width="100" Height="100" Fill="Yellow" />
   3:  </ControlTemplate>
   4:   
   5:  <Button Template="{StaticResource PlantillaBoton}" />

EJEMPLO 3

En está ocasión el template está definido dentro de un estilo que, adicionalmente, es el estilo por defecto para los botones de modo que todos deben cambiar a esta nueva apariencia:

   1:  <Style TargetType="Button">
   2:     <Setter Property="Template">
   3:        <Setter.Value>
   4:           <ControlTemplate>
   5:              <Ellipse Width="100" Height="100" Fill="Yellow" />
   6:           </ControlTemplate>
   7:        </Setter.Value>
   8:     </Setter>
   9:  </Style> 

Una nota adicional…

Los controles del tipo ContentControl, como el Button, incluyen la propiedad Content por medio de la cual podemos asignar el contenido del control. El uso más básico de esta propiedad permite insertar texto dentro de un botón. Sin embargo, al alterar la apariencia de un ContentControl este texto, o cualquier cosa que coloquemos en la propiedad Content, ya no es visible. Para preservar esta funcionalidad se debe insertar en el Template un objeto ContentPresenter en el sitio donde querramos ver dicho contenido.

En esta nueva definición del template ahora los botones se verán como un círculo amarillo bajo el cual estará el texto asignado a la propiedad Content (texto o cualquier cosa que asignemos a esa propiedad):

   1:  <Style TargetType="Button">
   2:     <Setter Property="Template">
   3:        <Setter.Value>
   4:           <ControlTemplate>
   5:              <StackPanel>
   6:                 <Ellipse Width="100" Height="100" Fill="Yellow" />
   7:                 <ContentPresenter HorizontalAlignment="Center" />
   8:              </StackPanel>
   9:           </ControlTemplate>
  10:        </Setter.Value>
  11:     </Setter>
  12:  </Style>

ALTERAR LA APARIENCIA DE LOS DATOS

Varios controles en XAML tienen la posibilidad de presentar listas de datos: GridView, ListView, ComboBox, ListBox, etc. Para estos controles, aunque es posible alterar su apariencia por medio de la propiedad Template, generalmente la necesidad más frecuente requiere alterar la apariencia de los datos que estos presentan. Para este tipo de controles disponemos de la propiedad ItemTemplate del tipo DataTemplate.

NO CONFUNDIR

La apariencia de un control se altera por medio de la propiedad Template que es del tipo ControlTemplate.

La apariencia de los elementos en los controles que presentan listas de datos se altera con la propiedad ItemTemplate del tipo DataTemplate.

EJEMPLO

Modificar la apariencia de los datos es muy similar a alterar la apariencia de un control, solo difiere en el nombre de la propiedad que debemos utilizar y, por supuesto, por la casi segura utilización de uno o varios bindings que permitan a cada elemento presentar un dato entre la lista de datos que presenta el control. Aquí vemos el DataTemplate definido como un recurso y referenciado por un control ListView:

   1:  <DataTemplate x:Key="dtMeses">
   2:     <Grid Width="100" Height="25">
   3:        <Border BorderBrush="DarkGreen" BorderThickness="2" Background="LightGreen" />
   4:        <TextBlock Text="{Binding}" Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" />
   5:     </Grid>
   6:  </DataTemplate>

Para este ejemplo esta sería la lista de los datos que debe presentar el ListView:

   1:  string[] Meses = new string[] { "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" };
   2:  DataContext = Meses; 

PARA SABER MÁS… Quickstart: control templates

Un comentario sobre “[Windows 8] Plantillas en xaml

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

    […] [Windows 8] Plantillas en xaml […]

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