Luis Guerrero Hablando de .NET, Silverlight, WPF, Windows Phone 7 y depuración

24Jul/081

[Curso] WPF para programadores de Windows Forms 5

[Básico – Medio]

Hola de nuevo, hoy vamos a hablar de una característica muy interesante de WPF, los DataTemplate o Data Templating.

¿Qué es un DataTemplate?

Es, como su nombre incica, una plantilla de datos. Pero, ¿a que se refiere con datos?, pues con datos se refiere a cualquier elemento dentro del árbol de controles de WFP. Eso incluye controles, controles de usuario y en general cualquier instancia de una clase. Eso significa que podemos añadir a un ListBox un elemento nuevo y que este sea una clase de negocio que represente un pedido.

Esta característica está muy bien, ya que no necesitamos utilizar ningún tipo de patrón a la hora de añadir a la presentación de nuestras aplicaciones nuestros objetos de negocio. Simplemente añadiéndolo. Pero el caso es que, cuando alguien añada una clase de objeto de negocio a una lista de elementos de un ListBox, el ListBox no sabe como “pintar” o representar ese elemento dentro de la UI, así que lo único que hace es llamar al método ToString() de nuestra clase de negocio.

Podemos por supuesto sobrescribir el método ToString() de nuestra clase de negocio pero el caso es que solamente seremos capaces de representar texto en la interfaz de usuario, y teniendo en cuenta las capacidades de WPF eso es algo que no se puede permitir. Tenemos que tener alguna manera de especificar cómo queremos que se dibuje ese Tipo de dato en pantalla.

Aquí es donde entran los DataTemplate, esta clase es una árbol de controles que van a representar nuestro objeto de negocio.

Imaginemos por un momento que tenemos una clase Cliente tal que así:

public class ClienteV1
  {
      public string Nombre { get; set; }
      public int CodigoCliente { get; set; }
      public DateTime Fecha { get; set; }
  }

Tenemos una serie de propiedades que definen el estado de nuestro cliente, pues bien lo que vamos a hacer es definir un árbol de controles en XAML para representar la clase cliente.

<DataTemplate>
    <WrapPanel>
        <Label/>
        <TextBox/>
        <TextBlock/>
    </WrapPanel>
</DataTemplate>

Ahora mismo únicamente tenemos un XAML que define un árbol de controles que podríamos utilizar para representar nuestra clase cliente, lo único que nos falta es “mapear” o enlazar a datos (DataBinding) las propiedades del objeto de negocio cliente con los controles de nuestro árbol. Se hace así:

<DataTemplate>
    <WrapPanel>
        <Label Content="{Binding Path=Nombre}" />
        <TextBox Text="{Binding Path=Fecha}" />
        <TextBlock Text="{Binding Path=CodigoCliente}" />
    </WrapPanel>
</DataTemplate>

Si nos fijamos por ejemplo en la etiqueta Label, en el atributo “Content” tenemos esto:

Content=”{Binding Path=Nombre}”

¿Qué estamos especificando ahí?, pues básicamente lo que le queremos decir a WPF es que si en el objeto de destino (nuestra clase Cliente) encuentra por reflexión una propiedad, y repito solo funciona con propiedades, con ese nombre pues que obtenga su valor y que lo establezca en la Dependency Property Content del control Label.

Pues ya esta!!.

Ya tenemos definido nuestro DataTemplate para el objeto de negocio Cliente. Es más aunque tenemos sobrescrito el método ToString() en nuestra clase Cliente WPF no hace caso y simplemente establece el DataTemplate.

Características avanzadas de los DataTemplate.

Nosotros en el ejemplo que hemos realizado hemos establecido el valor de este DataTemplate para el control en que estamos, en nuestro caso un ListBox. Puede ser muy común que este DataTemplate se tenga que usar en más sitios dentro de WPF, y lo suyo sería tenerlo como un recurso compartido para que sea accesible desde cualquier sitio. Esto se puede hacer así:

<ListBox HorizontalAlignment="Right" Margin="0,70,57,45" Width="85" IsSynchronizedWithCurrentItem="True" ItemTemplate="{DynamicResource DataTemplate1}"/>

Ahora bien tenemos que definir ese DynamicResource con valor DataTemplate1. Esto se hace a través de unos ficheros llamados ResourcesDiccionary que son una especie de ficheros xaml que solamente contiene recursos compartidos por la aplicación, podemos ver uno aquí:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DataTemplate x:Key="DataTemplate1">
        <Grid/>
    </DataTemplate>
    <!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>

Aunque se haya creado este fichero se tiene que especificar de alguna manera como se tiene que hacer referencia en todo el proyecto, para eso existen los recursos a nivel de aplicación, que los tenemos disponibles en el fichero app.xaml.

Pero lo que tenemos en este fichero son los recursos en sí, no referencias a ficheros externos. Así que tenemos que combinar todos los diccionarios en uno para que sean usados de manera global. 

<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ResourceDictionary.xaml"/>
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Y así es como se combinan los diccionarios para que estén disponibles en toda la aplicación.

El codigo de la aplicación esta aquí [CursoWPF5.zip]

En el siguiente post del curso hablaremos un poco más en detalle de los DataTemplates, como subscribirse a eventos dentro de los controles que están en la DataTemplate y además como hacer DataTemplates a partir de código.

¿Te ha gustado este artículo?

¡Considera subscribirte al RSS para estar al día!

Filed under: .Net, Windows, WPF -> Windows Forms Leave a comment