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

28Jun/094

[Curso] WPF para programadores de Windows Forms 8

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.

image

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.

clip_image004

Árbol Lógico:

image

Árbol Visual:

image

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.

clip_image010

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

clip_image012

Árbol Lógico:

image

Árbol Visual:

image

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.

¿Te ha gustado este artículo?

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

Filed under: WPF -> Windows Forms Leave a comment