Luis Guerrero - Dot Net World : WPF -> Windows Forms

[Curso] WPF para programadores de Windows Forms 9 : Templates

Luis Guerrero — Mon, 29 Jun 2009 12:08:00 GMT

[Curso] WPF para programadores de Windows Forms 9 : Templates

En el post anterior comentábamos como en WPF existen el árbol visual y el árbol lógico que nos permite definir como un control se comporta y como se dibuja en la pantalla, pues bien lo que vamos a ver ahora es como se pueden modificar el árbol visual y cómo podemos crear un árbol visual para una clase que no tiene árbol visual.

Todas los tipos de plantillas heredan de la misma clase, FrameworkTemplate que permite definir plantillas para diferentes tipos de controles.

Si nos fijamos en el diagrama, tenemos tres tipos de plantillas que definir:

· DataTemplate: permite definir una plantilla de datos, es decir asociar un árbol visual a una clase o tipo. Podemos definir cómo se va a visualizar la clase Employee.

· ControlTemplate: permite cambiar la plantilla visual de un control de WPF.

· ItemsPanelTemplate: permite cambiar la platilla de un control que es una lista de elementos, como por ejemplo un ListBox.

· HierarchicalDataTemplate: permite definir una plantilla de datos para una estructura jerárquica, como por ejemplo un árbol y asociar este a un TreeView.

DataTemplate

La clase DataTemplate permite definir una plantilla visual para un tipo cualquiera. Normalmente las plantillas se definen en XAML. Si tenemos un tipo como este:

public class Employee
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Company { get; set; }
}

Si lo establecemos como contenido de algún control WPF lo que hará será llamar al ToString() de este objeto para dibujarlo, podemos sobrescribir ToString() para darle otro sentido pero no podemos personalizar como el objeto se dibuja en pantalla.

Lo que podemos hacer es definir su plantilla visual mediante la clase DataTemplate en xaml, normalmente vamos a tener que definir nuestra DataTemplate en un diccionario de recursos o podemos hacerlo directamente en la propiedad ItemTemplate de algunos controles.

<DataTemplate DataType="{x:Type local:Employee}">
   <StackPanel>
       <TextBlock Text="{Binding Path=Name}" />
   </StackPanel>
</DataTemplate>

Como se puede observar en este ejemplo hemos definido un DataTemplate dentro del diccionario de recursos de Window, pero no hemos establecido la propiedad x:Key necesaria para poder acceder a ese valor en el diccionario, sino que lo único que hemos hecho es definir la propiedad DataType de la clase DataTemplate. Al hacer esto WPF automáticamente utilizará esta plantilla para dibujar el tipo Employee cuando se lo encuentre dentro del ámbito de la ventana. Esto es extremadamente útil, porque podemos definir esta plantilla en un ResourceDiccionary a nivel de Application y hacer que esté disponible para toda la aplicación.

Para asociar propiedades de la clase para mostrarla se realiza con un binding como se puede ver en el TextBlock, no quiero centrarme en eso ahora sino simplemente mostrar cuales son las capacidades de personalización de la DataTemplate.

Si hubiéramos utilizado un ContentControl para dibujar nuestro objeto Employe podríamos haber definido la plantilla directamente en la propiedad ContentTemplate, sin necesidad de asociar el DataType o establecer el x:Key.

<ContentControl>
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=Name}" />
            </StackPanel>
        </DataTemplate>
    </ContentControl.ContentTemplate>
</ContentControl>

ControlTemplate

ControlTemplate nos permite definir o redefinir la plantilla de un control, es decir de cualquier control que herede de Control, que es donde está definida la propiedad Template. La manera de proceder es igual, para un Button tenemos:

<ControlTemplate TargetType="{x:Type Button}" x:Key="ButtonControlTemplate">
    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" >
        <Border BorderThickness="3" BorderBrush="red">
            <ContentPresenter />
        </Border>
    </Microsoft_Windows_Themes:ButtonChrome>
</ControlTemplate>

Lo que hemos hecho en este ejemplo es redefinir la plantilla de Button para tener esto:

Como se puede observar lo que tenemos en pantalla no se parece a un botón, no tiene el aspecto que esperamos de un botón, pero si preguntamos su tipo es un Button, así que lo que hemos conseguido es modificar su árbol visual sin necesidad de heredad de Button y generar un tipo nuevo, simplemente cambiado su plantilla.

Este cambio de plantilla normalmente viene integrado en un estilo (Style) pero eso lo veremos en otro post.

ItemsPanelTemplate

Esta clase permite definir la plantilla para un control de tipo ItemsControl, como por ejemplo TreeView, TabControl, etc. En este ejemplo vamos a cambiar la plantilla del ListBox para hacerlo con UniformGrid.

<ItemsPanelTemplate x:Key="ItemsPanel">
    <UniformGrid IsItemsHost="True">
    </UniformGrid>
</ItemsPanelTemplate>

Aquí podemos ver el resultado:

Las posibilidades son infinitas, pues podemos personalizar cualquier control como nosotros queramos sin necesidad de tener que tocar una sola línea de código simplemente con un poco de xaml.

HierarchicalDataTemplate

Esta plantilla basada en un DataTemplate permite generar plantillas jerárquicas para nuestros tipos de datos, como está pensada para usarse con un tipo de datos, primero vamos a definir un tipo de dato en árbol y generar algunos elementos.

public class Node
{
    public string Name { get; set; }
    public ObservableCollection<Node> Items { get; set; }

    public Node()
    {
        Items = new ObservableCollection<Node>();
    }
}

Esta clase Node contiene un nombre una colección de elementos y una colección de elementos del mismo tipo en Items. Podemos definir una plantilla jerárquica como esta:

<HierarchicalDataTemplate ItemsSource="{Binding Path=Items}" x:Key="NodeTemplate">
    <TextBlock Text="{Binding Path=Name}" />
</HierarchicalDataTemplate>

Tenemos que definir cuál va a ser la propiedad que se va a usar como origen de datos para los Items que se van a generar, la propiedad ItemsSource nos permite definir mediante un Binding que la propiedad Items, de nuestra clase Node, será la encargada de generar los elementos hijos. Por cada uno de las clases Node que nos encontremos vamos a generar un TextBlock en el que vamos a asociar la propiedad Text del control, con un Binding, a la propiedad Name de nuestra clase Node.

Ahora tenemos que generar algunos elementos de ejemplo:

private Node GenerateRandomNodes()
{
    Node n = new Node();
    n.Name = "Raiz";
    for (int i = 0; i < 20; i++)
    {
        Node tmp = new Node();
        tmp.Name = i.ToString();
        n.Items.Add(tmp);
        for (int x = 0; x < 10; x++)
        {
            Node tmp2 = new Node();
            tmp2.Name = string.Format("{0} - {1}", i, x);
            tmp.Items.Add(tmp2);
        }
    }
    return n;
}

Una vez ejecutado este es el resultado:

Resumiendo

Como se puede observar una de las cosas buenas de tener un árbol visual y un lógico es que podemos redefinir como nuestro control o clase se visualiza en pantalla simplemente generando una plantilla. Las plantillas son el mecanismo natural por el cual se pueden personalizar los controles en WPF y son la principal herramienta de los diseñadores para personalizar.

Avanzado

Para terminar el artículo me gustaría hablar sobre un tema que a todos se nos plantea en algún momento, generar plantillas de manera dinámica, por código. En WPF, se pueden generar plantillas dinámicamente, pero el tema es algo complicado y abstracto. Veamos un ejemplo.

Vamos a intentar definir una plantilla dinámica para nuestro tipo de dato Employee por código, si empezamos a generar código vemos que podemos generar una instancia de la clase DataTemplate pasando por parametro el tipo del objeto al que queremos generar la plantilla, la propiedad VisualTree de tipo FrameworkElementFactory nos permite definir como queremos que sea nuestra plantilla.

Todo el trabajo está en esta clase FrameworkElementFactory, para definir los elementos tenemos que especificar cómo se construirán, así que siguiendo nuestro ejemplo de DataTemplate, en el que tenemos un StackPanel y dentro un TextBlock así es como se definiría en código:

private DataTemplate GenerateDataTemplate()
{
    DataTemplate dt = new DataTemplate(typeof(Employee));
    FrameworkElementFactory stackPanel = new FrameworkElementFactory();
    stackPanel.Type = typeof(StackPanel);
    stackPanel.SetValue(StackPanel.BackgroundProperty, new SolidColorBrush(Colors.Yellow));
    FrameworkElementFactory text = new FrameworkElementFactory(typeof(TextBlock));
    text.SetBinding(TextBlock.TextProperty, new Binding("Name"));
    stackPanel.AppendChild(text);
    text = new FrameworkElementFactory(typeof(TextBlock));
    text.SetBinding(TextBlock.TextProperty, new Binding("Company"));
    stackPanel.AppendChild(text);
    text = new FrameworkElementFactory(typeof(TextBlock));
    text.SetBinding(TextBlock.TextProperty, new Binding("Age"));
    stackPanel.AppendChild(text);
    dt.VisualTree = stackPanel;
    return dt;
}

La idea es establecer en cada uno de los FrameworkElementFactory las DependencyProperties, Bindings y Childrens que definen a un control.

El código fuente lo podéis descargar de aquí http://www.luisguerrero.net/downloads/templates.zip

Saludos. Luis.

[Curso] WPF para programadores de Windows Forms 8

Luis Guerrero — Sun, 28 Jun 2009 18:01:00 GMT

Ha pasado mucho tiempo desde mi último post de esta serie, el trabajo y haberme mudado de casa no me han permitido escribir este tipo de posts. Ahora un poco más relajado podemos continuar con esta serie de post sobre como programar WPF para los programadores de Windows Forms.

En este post vamos a hablar sobre los dos tipos de arboles de controles que hay que WPF: el árbol visual (Visual Tree) y el árbol lógico (Logical Tree). Estos dos conceptos son muy importantes para un programador de WPF porque permite conocer muy bien cómo trabaja WPF con los controles y cómo podemos personalizar los nuestros. En WF solamente tenemos el árbol lógico, siendo este la relación entre los controles que son contenedores con sus hijos.

En WF podemos tener un Panel y dentro de este podemos tener un botón o podemos tener un TabPage y dentro de este podemos tener otro panel y dentro un label. Las relaciones entre los padres e hijos forman un árbol de controles.

En este grafico podemos ver cuál es el árbol de controles de un formulario cualquiera de Windows Forms. Con este árbol lo único que estamos especificando es que control está dentro de cual y por tanto cual será su espacio de dibujado.

En WF para especificar el rectángulo de dibujado de un control tenemos la propiedad Location (Size) y tenemos Size (Size), dentro de ese rectángulo podemos dibujar con GDI lo que queramos que después será compuesto formando la imagen final del formulario. La manera en la que se definen visualmente los objetos en Windows Forms es a través del código que se ejecuta en OnRender pero no tenemos ninguna otra manera de definir el aspecto de un control, es decir si queremos cambiar el aspecto del control tenemos que sobreescribir el método OnRender teniendo así que cambiar código del control y generando un tipo nuevo, puesto que la única manera de sobrescribir un método virtual es heredando. Esto tiene una serie de problemas puesto que tenemos que modificar el código de nuestro control y desde la perspectiva de un diseñador gráfico es inviable sentarlo con el Visual Studio a dibujar con GDI.

En WPF la cosa cambia mucho. Ahora, como ya he comentado antes, tenemos dos arboles el visual y el lógico. El árbol visual, como su nombre indica, se encarga de definir cuáles son las clases que se encargan de definir como un control se visualiza en pantalla y el árbol lógico es como el control se comporta.

Para explicar este concepto vamos a escoger el botón de WPF para ver cuáles son su árbol visual y lógico.

Árbol Lógico:

Árbol Visual:

Como podeos observar la cosa cambia mucho porque, del árbol lógico, que es al que estamos todos acostumbrados, cambia mucho con respecto al árbol visual. Pero vayamos por partes.

Button es un caso especial porque este control hereda de ContentControl lo que significa que podemos establecer como contenido lo que queramos (object) en este caso un string. Esto está relacionado con el árbol lógico porque como vemos, el único hijo del botón es el contenido (Content) lo que desde luego tiene sentido porque en WPF podemos establecer como hijo de un botón lo que queramos como por ejemplo un checkbox.

Vayamos ahora a por el árbol visual: si nos fijamos el árbol visual tiene 3 elementos, un ButtonChrome, un ContentPresenter y un TextBlock. Vamos a identificar esos elementos en la imagen del botón.

· ButtonChrome: corresponde el borde más el degradado del botón

· ContentPresenter: es el hueco donde se dibujará el contenido del control

· TextBlock: es el control en WPF para dibujar texto

Podemos modificar el contenido del botón haciendo que en vez de que contenga un string que contenga un checkbox y este tenga un texto asignado.

Árbol Lógico:

Árbol Visual:

Ahora como hijo del ContentPresenter tenemos al CheckBox que a su vez tiene su árbol visual.

Como se puede observar para un ejemplo pequeño, el árbol visual contiene 7 elementos así que conforme se añaden nuevos elementos el árbol visual crece muy rápidamente.

Lo bueno que tiene los arboles visuales es que definen la manera en que el control se dibuja a sí mismo separando el aspecto del comportamiento. Ahora podemos modificar el aspecto del botón de WPF sin cambiar su comportamiento, como hacíamos en WF. Esto permite que se pueda definir el árbol visual de un control con XAML permitiendo esto que diseñadores puedan generar estilos o temas de los controles desde herramientas como Expression Blend.

La siguiente pregunta es cómo se modifican o generan estos tipos de plantillas visuales, pero eso lo veremos en el siguiente post que hablaré sobre las diferentes tipos de plantillas para WPF.

Ah, por cierto, si programais para Silverlight decir que todo lo dicho aquí es aplicable igualmente a esta tecnología.

Saludos. Luis.

Virtual Tech Days 09

Luis Guerrero — Sat, 11 Apr 2009 13:05:00 GMT

El 1 de abril se celebro un evento mundial online en Microsoft llamado Virtual Tech Days 09, que duro 24 horas ininterrumpidamente desde diferentes localizaciones del planeta, una agenda cargada de contenidos para que podáis aprender sobre lo nuevo que viene en Microsoft.

Yo participé en este evento como conferenciante hablando de WPF, en concreto de los problemas que se puede encontrar los programadores de Windows Forms cuando quieren migrar a WPF. Hay que recordar que yo mantengo una lista de post llamados “WPF para programadores de WF” y justamente de eso hable, una casualidad que Microsoft me propusiera esa charla.

Aquí tenéis la grabación de la charla desde Msn Video,

WPF para programadores de Windows Form

también os dejo la presentación usada

y el enlace a la web oficial.

http://www.msfttechdays.com/public/home.aspx

Espero que os guste.