[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.

[Curso] WPF para programadores de Windows Forms – Parte 4

Hola de nuevo a todos, continuamos con el curso de WPF para programadores de Windows Forms, en esta cuarta entrega del curso vamos a empezar a ver cosas mucho más prácticas que teóricas de WPF.

En el post anterior vimos como se creaba una ventana en WPF y como se creaba un objeto System.Windows.Application para empezar a utilizar esa ventana. En este post nos vamos a centrar en ver cuáles son las características que Application nos ofrece y Window, además de ver los dos tipos de aplicaciones que tenemos disponibles en WPF: Windows Application y Browser Application.

Lo que hemos visto hasta ahora son aplicaciones de WPF de ventana “Windows Application” y la ventana representa el contenedor de más alto nivel de la aplicación, este es el modo tradicional de desarrollo de aplicaciones. Después tenemos WPF Browser Application que como su nombre indica la aplicación de wpf es hosteada en un navegador como Internet Explorer o Firefox. Eso que significa que ya no tenemos ventana sino que tenemos un host que ya no es Windows sino una ventana de un navegador y dentro de esa ventana podemos programar.

Yo me voy a centrar en el desarrollo de aplicaciones de escritorio por ser las más comunes. Vamos a empezar a ver cuáles son los métodos, propiedades y eventos que Window define en su ámbito de clase. Nos vamos a centrar en los métodos o propiedades que no estaban disponibles en WF o que son específicos de WPF. Entre los métodos más interesantes tenemos:

  • DragMove, permite que cuando se llame a este método se pueda mover la ventana sin necesita de hacer click en la barra de título.
  • OnContentChanged, método que se llama cuando el contenido de la ventana se modifica, (recordemos que Windows hereda de ContentControl)
  • OnContentRendered, lanza el event ContentRedered.
  • OnCreateAutomationPeer, este método crea un objeto WindowAutomationPeer que se utiliza para hacer pruebas de la UI.

Ahora vamos a ver las propiedades y dependency property

  • AllowsTransparency, es una propiedad que indica si la ventana soporta transparencia.
  • OwnedWindows y Owner, son, respectivamente, la lista de ventanas de las que esta ventena es propietario y el propietario de la ventana actual, esta propiedad es usada para los diálogos modales en WPF.
  • SizeToContent, esta propiedad establece como se va a resizar la ventana en sí, basada en el contenido que muestra.

Vamos ahora a ver algunos ejemplos de ventanas creadas Visual Studio.

image

image

image

Todas estas ventanas están creadas en el mismo proyecto de Visual Studio, solamente se puede seleccionar una ventana al inicio y si queremos ir cambiando que ventana queremos iniciar tenemos que irnos al fichero App.xaml que contiene el Xaml del objeto Application de nuestro proyecto. Dentro de este fichero App.Xaml hay un atributo en el nodo Application StartupUri que es la Uri (Uniform Resource Identifier) de inicio de la aplicación, en mi caso está en VentanaNormal.xaml pero se puede cambiar por cualquier uri que contenga una ventana.

Aquí teneis el proyecto de Visual Studio con los tres ejemplos de ventanas creadas en WPF. [CursoWPF4.zip]

Espero que os guste.

[Curso] WPF para programadores de Windows Forms &ndash; Parte 3

Ahora que ya hemos las diferencias entre las arquitecturas en WPF y Windows Forms es el momento de comparar como se programa en ambas tecnologías. Vamos a comparar cuales son las características para programar con WPF y WF, además de hacer el típico Hola Mundo.

Ambas tecnologías se programan con algún lenguaje incluido en .net framework, WF viene desde la versión 1.0 del framework, mientras que WPF viene incluido en la versión 3.0, 3.0 SP1, 3.5 y 3.5 SP1.

En WPF tenemos dos maneras de definir la interfaz de usuario de nuestros programas, a través de código trasero o a través de XAML. Es algo parecido a como se programa en ASP.NET, se tiene un fichero con extensión aspx que contiene el html y el código de los controles de servidor de ASP.NET y además tenemos el fichero de código trasero asociado con este fichero aspx, por ejemplo podemos tener un Default.aspx y un Default.aspx.cs. Los dos ficheros están asociados a través de la clase que contienen.

Pues bien en WPF es igual, tenemos un fichero Window1.xaml que contiene el código XAML de la UI de la ventana y además tenemos el Window1.xaml.cs que contiene el fichero de código fuente asociado a este fichero xaml. En WPF, como en ASP.NET, se tiene que asociar de alguna manera el fichero xaml con el fichero cs para que se pueda acceder a los controles definidos en el xaml. Por ejemplo tenemos un fichero Window1.xaml definido así

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="WpfApplication1.Window1"
        x:Name="Window"
        Title="Window1"
        Width="640" Height="480">
    <Grid x:Name="LayoutRoot"/>
</Window>

Y tenemos otro fichero Window1.xaml.cs definido de esta manera:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

Si nos fijamos en el fichero Window1.xaml.cs está definido un namespace WpfApplication1 y este contiene una clase parcial Window1 que hereda de Syste.Windows.Window, pues bien esta clase Window1 es la que contiene la lógica de la ventana que estamos creando. En el fichero Window1.xaml dentro del nodo Window hay un atributo del namespace {x} definido así xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml y este tiene una propiedad Class en que está establecido el nombre de la clase a la que está asociada esta ventana, hay que tener en cuenta que esta el namespace completo WpfApplication1.Window1 y no directamente Window1, esto es porque después la clase se localizará por reflexión y dentro en la definición de IL no existen namespaces como en C# así que técnicamente el nombre de esa clase no es Window1, sino WpfApplication1.Window1.

Esta sería la manera de asociar un fichero xaml con su correspondiente fichero cs de code behind. Nosotros en este primer ejemplo de Hola Mundo lo vamos a hacer directamente el código todo para familiarizarnos con el entorno y con las clases que hay disponibles.

Primero vamos a definir el código fuente mínimo necesario para insertar un botón dentro de un formulario y al pulsar ese botón que salga un mensaje de Hola Mundo. Así sería en Windows Forms

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{

    static class Program
    {
        [STAThread]
        static void Main()
        {
            Form form = new Form();
            Button button = new Button();
            button.Text = "Hola Mundo Windows Forms";
            button.Location = new Point(10, 10);
            button.Click += new EventHandler(OnButtonClick);
            form.Controls.Add(button);
            Application.Run(form);
        }

        static void OnButtonClick(object sender, EventArgs e)
        {
            MessageBox.Show("Hola mundo WF");
        }
    }
}

Y así sería en WPF.

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    class Program
    {
        [STAThread]
        public static void Main()
        {
            Window window = new Window();
            Button button = new Button();
            button.Content = "Hola Mundo Windows Presentation Foundation";
            button.Click += new RoutedEventHandler(OnButtonClick);
            window.Content = button;
            Application app = new Application();
            app.Run(window);
        }

        static void OnButtonClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Hola Mundo WPF");
        }
    }
}

El código generado es muy parecido, pero podemos ver alguna de las características que hemos estado comentando de WPF. Por ejemplo Window hereda de ContentControl con lo que no tiene una propiedad Controls sino un Content (object) en el que establecemos el botón. El objeto Application en Windows Forms es directamente un singleton, mientras que en WPF tienes que crear una instancia de tu propia aplicación o heredad de esta clase y llamar al método Run, de instancia y no estático como en WF.

En los siguientes post me centraré en WPF y empezaré a hablar de características especificas de WPF.

Espero que os guste.

Luis.

[Curso] WPF para programadores de Windows Forms &ndash; Parte 2

En el post anterior sobre WPF para programadores de Windows Forms estuvimos hablando de la compatibilidad Hwnd de las dos tecnologías y de cómo estas se integraban perfectamente en Windows. Ahora viene el turno de comparar los objetos de primer nivel que tenemos en Windows Forms y WPF para crear ventanas. Vamos a centrarnos en comparar cuales son los arboles de herencia de las clase Ventana de WF y WPF para así ver cuáles son las diferencias y similitudes que tienen.

image

image

Si nos fijamos en árbol de herencia de WF, encontramos esto:

System.Object
  System.MarshalByRefObject
    System.ComponentModel.Component
      System.Windows.Forms.Control
        System.Windows.Forms.ScrollableControl
          System.Windows.Forms.ContainerControl
            System.Windows.Forms.Form

System.Windows.Forms.Form es la clase que representa al formulario, la ventana de WF, esta as u vez hereda de ContainerControl que es una clase que provee funcionalidad específica para la administración de controles que son contenedores de otros controles, como por ejemplo un Panel, esta a su vez hereda de ScrollableControl, clase la cual habilita la funcionalidad de scroll del contenido del control. Ahora llegamos a System.Windows.Forms.Control que es la clase base de todos los controles de UI de WF y que además maneja el manejador del control (hWnd), tanto la posición del control Location, como el tamaño Size, como los colores, etc.

Esta clase Control hereda de System.ComponentModel.Component que es la primera clase que no está dentro del namespace System.Windows.Forms, esta clase representa los controles o componentes (como su nombre indica) que pueden usarse dentro de la programación de aplicaciones con soporte para interfaz de usuario. Esta clase es importante pues habilita que nuestros componentes o en este caso controles de Windows Forms soporten un tiempo de diseño. Tiempo de diseño como por ejemplo el diseñador de UI de Visual Studio, es importante aclarar esto porque el soporte del diseñador de WF no es de Visual Studio es de .Net Framework, ya que nosotros mismo podemos habilitar un host de diseño para los componentes de la UI y tendríamos las mismas características que Visual Studio nos ofrece para hostear controles de WF.

Además Component implementa IComponent que habilita el soporte para componentes y IDisposable para la recolección de elementos no administrados dentro de la clase. Component hereda de MarshalByRefObject, clase la cual hereda de System.Object. Esta clase, MarshalByRefObject, habilita que los objetos que hereden puedan ser llamados fuera del dominio de aplicación en el que está el objeto, como por ejemplo en las aplicaciones de Remoting y además especifica que la manera de referenciar objetos remotos es a través de referencia. Fijaros que todos los componentes de Windows Forms heredan de esta clase MarshalByRefObject con lo cual tendrían soporte “de serie” para remoting. En lo que nos concierne e Windows Forms, decir que la clase más importante de todos es System.Windows.Forms.Control que es la que habilita que la ventana sea un control al fin y al cabo, pero un control de alto nivel.

Ahora vamos a ver cuál es el árbol de herencia de una ventana en WPF:

System.Object
  System.Windows.Threading.DispatcherObject
    System.Windows.DependencyObject
      System.Windows.Media.Visual
        System.Windows.UIElement
          System.Windows.FrameworkElement
            System.Windows.Controls.Control
              System.Windows.Controls.ContentControl
                System.Windows.Window

En WPF la clase que representa una ventana es System.Windows.Window y está en el ensamblado PresentationFramework.dll, esta clase hereda de System.Windows.Controls.ContentControl que representa un control de WPF que únicamente tiene un solo hijo o contenido principal, este concepto es muy usado en WPF, un control que únicamente puede contener a otro control. Nosotros en WF tenemos una propiedad Controls que es una lista de todos los controles que contiene ese control, en controles como Panel tiene sentido, pero en Label no tiene sentido tener una lista de controles porque Label no admite más controles hijos, pues bien en WPF todos los controles pueden contener otro control, sin límite y sin excepción. Esto puede resultar algo chocante pero es así, por ejemplo la clase System.Windows.Controls.Label hereda de esta clase con lo que Label tiene una propiedad llamada Content de tipo object en el que nosotros podemos establecer lo que queramos, desde un string, un double, otro Label, un Button, o un MediaElement con un video reproduciéndose. Esto no es como en WF que Label tiene una propiedad Text de tipo string para establecer un texto, en WPF los controles que heredan de ContentControl pueden establecer en su contenido (Content) lo que queramos, incluso una clase de lógica de negocio (esto ya lo veremos más adelante).

Pero no nos despistemos, ContentControl hereda de System.Windows.Controls.Control que es la clase que representa una UI que una un ControlTemplate para definir su apariencia. ¿Esto qué significa?, pues que la clase Control, tiene una propiedad ControlTemplate para definir el árbol de controles que representa a este control. Ahora justo es el momento para introducir el concepto de XAML. WPF utiliza para definir la interfaz de usuario unos ficheros con extensión .xaml que son básicamente ficheros XML con una estructura jerárquica. Cada nodo de un fichero .xaml representa una clase de WPF y a través de los atributos se establecen las propiedades de la clase, así por ejemplo podemos tener la representación de un Label así

<Label Content="Nombre" Width="75" />.

Pues bien esta clase ControlTemplate, es justamente eso la plantilla del árbol de controles del control actual, algo así como:

<ControlTemplate TargetType="Button">
    <Grid>
        <Ellipse Fill="{TemplateBinding Background}"/>
        <ContentPresenter HorizontalAlignment="Center"
        VerticalAlignment="Center"/>
    </Grid>
</ControlTemplate>

Podéis pensar que esta clase System.Windows.Controls.Control es la equivalente a System.Windows.Forms.Control, pero no porque la clase Control de WPF tiene muchas más cosas que la de WF y hay una clase base que tiene más similitudes con las clase Control de WF.

Llegado a este punto vamos a seguir otro orden explicando el árbol de herencia porque necesitamos explicar demasiados conceptos que hacienda al revés sería mucho más fácil. Así que ahora el orden que vamos a seguir es:

System.Windows.FrameworkElement 
    System.Windows.UIElement
        System.Windows.Media.Visual
            System.Windows.DependencyObject 
                System.Windows.Threading.DispatcherObject 
                    System.Object

Vamos a ir desde System.Object hacia System.Windows.FrameworkElement. Empezamos con la clase System.Windows.Threading.DispatcherObject que la clase que asocial un objeto con un Dispatcher, ahora bien que es un Dispatcher, vamos primero a repasar un concepto de WF.

En WF la UI de no es multihilo, eso que significa que si desde un Thread diferente al Thread que creo que control se intenta modificar alguna propiedad del control, es una operación no autorizada un puede lanzar una excepción o el programa hacer cosas extrañas. Eso que significa, que si tengo un control y quiero modificar, por ejemplo, la propiedad Text desde otro Thread, ¿no puedo?. Claro que se puede modificar, pero se tiene que hacer de una manera muy especial, utilizando un método definido en la clase System.Windows.Forms.Control llamado Invoke. Este método invoke nos permite pasarle un delegado, para que ese delegado se ejecute dentro del Thread que creo que control. Invoke es un método de instancia con lo que lo tenemos que llamar desde el control que queremos modificar. Y si yo no se cuando tengo que llamar a este método porque no se estoy en un Thread diferente al que lo creo?, pues tienes la propiedad InvokeRequired (bool) que en caso de que sea necesario llamada al método Invoke devolverá true. Pues bien este patrón de llamadas entre hilos para los controles de WF, también está presente en WPF y justamente el Dispatcher es la clase que se encarga de ese cometido. La clase DispatcherObject es la clase que contiene una propiedad llamada Dispatcher que es justamente el que maneja las llamadas entre Threads de los controles de WPF. Esta clase Dispatcher (se llama igual que la propiedad), tiene un método igual que en WF llamado Invoke, pero a diferencia de la propiedad InvokeRequired, aquí para comprobar si el Thread actual es diferente del Thread que creo que control de WPF tenemos el método CheckAccess que devuelve, ojo, true en caso de que el Thread actual sea el mismo Thread que creó el control y false en otro caso, justo al revés que en WF. Además tenemos VerifyAccess que hace lo mismo pero lanza una excepción del tipo InvalidOperationException en caso de que el Thread actual no tenga Dispatcher.

Como veis son dos conceptos análogos pero están implementados de manera diferente en WF y WPF, tengo un post pendiente de cómo funciona el Invoke de WP porque es bastante interesante hablar sobre ello.

La siguiente clase de nuestra lista es DependencyObject la cual es un sistema de propiedades dentro de WPF que soportan herencia y se propagan a través del árbol lógico de una aplicación, para que cuando un valor de una propiedad cambie, por ejemplo, en una ventana todos los controles que están en esa ventana sean notificados del cambio. Si cambiamos el color de la letra en una ventana que todos los controles que están dentro de esa ventana sean notificados, esto ahora mismo en WF es posible, pero la característica principal de esto es que nosotros podemos hacer también nuestras propias dependencias. Esto como imaginareis en WF no tiene ninguna equivalencia.

Y ahora llegamos a System.Windows.Media.Visual una clase muy importante dentro de la UI de WPF. Esta clase provee soporte para dibujado (redering) de la UI, soporte para detención de elementos (hit testing), transformación de coordenadas, recuadrado del contenido. Esta clase es la clase básica para el desarrollo de un control de WPF que tiene soporte para dibujado, y además esta clase tiene soporte para manejador de ventana (hWnd). Las características que tiene son:

  • Soporte para dibujado
  • Transformaciones de los elementos visuales (rotación, translación, escala, etc)
  • Recorte (Clipping)
  • Prueba de coordenadas (Hit testing)
  • Calculo del recuadro de dibujado

Como veis es un soporte muy básico para el dibujado en pantalla no soporta manejo de eventos, layout, estilos o enlace a datos.

La clase System.Windows.UIElement es el punto de inicio para los controles que soportan los diferentes tipos de layout que hay en WPF. En WF estamos acostumbrados a hacer el layout de los controles a través de la posición del control y el tamaño del objeto (Location(Point), Size(Size)), pues bien en WPF hay varios tipos de layout dependiendo del control actual en que contenedor esté. Para que os hagáis una idea es parecido al layout de una web (html) en la que se puede usar Top, Left, Right, Bottom y se pueden usar grids. Esta clase expone una serie de métodos virtuales que las clases que lo heredan pueden sobreescribir para modificar el comportamiento de layout del control. Además este es el primer control dentro del árbol de herencia que soporta eventos de teclado, ratón y estilos. Todos estos eventos están implementados como “routed events” que son un tipo de eventos de WPF que permiten que se propaguen hacia arriba (bubbling) y hacia abajo (tunneling).

Esta clase si se puede comparar como un elemento básico de los controles de Win32 y la podemos comparar más con la clase Control de WF, además de poder compararla también con un elemento de DHTML.

Y llegamos por fin a la clase FrameworkElement la cual aglutina todas las características vistas en las clases anteriores y representa el elemento básico de todos los controles o elementos de framework de WPF. FrameworkElement extiendo UIElement y añade estas características:

  • Define un sistema de layout: FrameworkElement define una serie de métodos virtuales que estaban definidos en UIElement para generar el sistema de layout de los controles, pero define otros métodos para que los controles puedan interactural con ese sistema de layout. Entre los métodos más importantes para el cálculo del layout tenemos, Arrange(Rect final) y Measure(Size size). Arrange posiciona los elementos hijos del control y determina cual es el tamaño en el que los elementos hijos están de manera confortable y Measure los controles hijos calculan cual su tamaño ideal para su dibujado.
  • Define un árbol de controles para que los controles puedan interactuar
  • Define eventos para el ciclo de vida de un objeto.
  • Soporte para enlace a datos
  • Soporte para estilos
  • Soporte para animaciones

Esta parte ha sido un poco más larga, pero hay que tener en cuenta que WPF define mucha más funcionalidad para los controles de la UI que WF. Resumiendo un poco WPF tiene más capas de abstracción para definir la misma funcionalidad que WF y además añade soporte para otras características que en WF no teníamos, como estilos, enlace a datos, layout más complejos, ect. Además de la idea de que un control puede contener a otro control, cosa que en WF no es posible, ahora que tenemos claro cuál es la arquitectura de los controles de WPF, de una manera rápida en el siguiente post vamos a verlo de una manera práctica y con ejemplos concretos de control y ventana.

Luis.

[Curso] WPF para programadores de Windows Forms – Parte 1

Hola a todos, como programador de Windows Forms, a veces trabajando con WPF me encuentro con problemas que en Windows Forms solucionaba de una manera muy rápida y también me encuentro con problemas que en Windows Forms en WPF son muy sencillos de solucionar. Pues bien esta serie de post son una introducción a WPF para programadores de Windows Forms, que cosas son iguales, similitudes y en que características se diferencian.

Tenemos que decir que Windows Forms es la tecnología que viene con el .Net Framework desde la versión 1.0 y sigue actualmente. Es la tecnología de Microsoft para realizar formularios en Windows y para que lo entendamos completamente es un wrapper muy grande de la api de Win32. Aunque Windows Forms es completamente administrado hay que decir que es compatible con las tecnologías actuales, puedes interpolar con COM y hacer llamadas al sistema operativo, además de que soporta el procesado de mensajes de Windows, como cualquier aplicación Win32.

En contra tenemos WPF que, según Microsoft, es el modelo de programación de la siguiente generación de aplicaciones de escritorio, es como una versión mucho más potente de Windows Forms. Pero no se queda solo en esto las similitudes y las diferencias son a primera vista muy grandes pero en verdad son tecnologías muy similares.

Cualquier programador de C o C++ de Windows sabrá perfectamente cómo funciona el procesado de mensajes de Windows, hay un método en la API de Win32 sendmessage que nos permite enviar mensajes personalizados y que Windows lo enrute al elemento correspondiente.

LRESULT SendMessage(HWND hWnd,     UINT Msg,     WPARAM wParam,     LPARAM lParam );

Esta es la manera que tiene Windows de funcionar con la UI de cualquier programa pues se envía mensajes para cualquier evento que se produzca en el sistema, como por ejemplo:

  • El ratón a entrado en el área de una ventana
  • Se ha movido el ratón
  • Se ha hecho click

Y por ejemplo, otros mensajes no tan sutiles o perceptibles con el usuario como:

  • Se ha conectado un dispositivo USB
  • Se ha creado un proceso
  • Se ha enchufado el adaptador de corriente del equipo (portátil)

Windows Forms y WPF son dos tecnologías que siguen utilizando este procesado de mensaje y lo podemos ver presente claramente en las dos tecnologías.

En Windows Forms podemos sobrescribir una función dentro de la clase System.Windows.Forms.Control llamada WndProc(ref Message m) que justamente lo que hace es procesar esos mensajes de la interfaz de usuario, para que, por ejemplo, cuando alguien pulse en un botón, esta función capture ese mensaje y lance el evento Click. Por eso nosotros no tenemos que estar comprobando cada cierto tiempo que alguien ha pulsado el botón, es porque ese método lo hace por nosotros, los programadores de C++, seguro, conocerán muy bien esta función por ser una función en la que suele haber un switch muy grande que dependiendo del mensaje (UINT Msg) así se llamada a una función o a otra. Aquí tenemos un ejemplo de ese procesado de mensajes de Windows en C++.

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) {     int wmId, wmEvent;     PAINTSTRUCT ps;     HDC hdc;      switch (message)     {     case WM_COMMAND:         wmId    = LOWORD(wParam);         wmEvent = HIWORD(wParam);         switch (wmId)         {         case IDM_ABOUT:             DialogBox(hInst, MAKEINTRESOURCE(IDD_ABOUTBOX), hWnd, About);             break;         case IDM_EXIT:             DestroyWindow(hWnd);             break;         default:             return DefWindowProc(hWnd, message, wParam, lParam);         }         break;     case WM_PAINT:         hdc = BeginPaint(hWnd, &ps);         EndPaint(hWnd, &ps);         break;     case WM_DESTROY:         PostQuitMessage(0);         break;     default:         return DefWindowProc(hWnd, message, wParam, lParam);     }     return 0; }

WPF tampoco se queda lejos de este comportamiento, de hecho está también muy integrado ese concepto en WPF. Si nos fijamos en un control cualquiera de WPF, por ejemplo Label, y vemos su árbol de herencia, en concreto de la clase de la cual hereda System.Object.

System.Object   System.Windows.Threading.DispatcherObject     System.Windows.DependencyObject       System.Windows.Media.Visual         System.Windows.UIElement           System.Windows.FrameworkElement             System.Windows.Controls.Control               System.Windows.Controls.ContentControl                 System.Windows.Controls.Label

Esta clase System.Windows.Threading.DispatcherObject, es una clase especial pues es un sistema de procesado de mensajes implementados por un Dispatcher, de hecho funciona igual que el procesador de menajes de Windows Forms y que el método WndProc, y WPF utiliza los mensajes de Win32 para enviarse mensajes entre los hilos y de la UI. Si nos fijamos bien en la clase nos damos cuenta de que es una clase abstracta y por tanto no tiene implementación en todos los métodos, si buscamos con el Reflector si existe un método igual en Windows Forms (WndProc) resulta que tal método no existe. Pero se nos ha asegurado que WPF utiliza este mismo sistema que las demás aplicaciones de Windows, así que ¿dónde está ese método especial?. El hecho de que esta clase sea abstracta no es casual porque resulta que este sistema de Dispatcher puede funcionar de varias maneras, si exploramos con el reflector y vemos las clases que heredan de esta (DispatcherObject) nos encontramos en un namespace interno de Microsoft una clase llamada HwndWrapper (MS.Win32.HwndWrapper) que hereda de DispatcherObject y resulta que esta clase tiene un método WndProc. Bingo. Hemos encontrado la clase que procesa estos mensajes de Windows en las aplicaciones de WPF de la misma manera que lo hace Windows Forms y C++.

Como os he dicho Windows Forms y WPF están construidas de la misma manera en Windows, y el hecho de que las dos sean “HwndReady” permite que podamos interpolar con Windows de manera transparente y el caso es que en una aplicación de Windows Forms podemos hostear un control de WPF y al revés, en WPF podemos hostear un control de Windows Forms. Esto aunque puede parece algo obvio, es una característica que hace que estas dos tecnologías que aunque a priori sean muy diferentes resulta que son muy parecidas y pueden comunicarse de una manera muy transparente.

En el siguiente post sobre como conocer WPF para programadores de Windows Forms haremos una comparación entres los elementos básicos para la UI, las ventanas, los controles, los eventos de teclado y ratón, como se dibujan las aplicaciones y los enlaces a datos.

Espero que os guste!!.

Luis.