Introducción al uso de XAML en WPF

Hola ¿qué tal?


En esta ocasión voy a platicar sobre lo que es WPF, y bueno, más que decir lo qué es  (que ya la gran mayoría lo ha escuchado) pues quiero dar una breve, rápida y concisa introducción a su uso con Visual Studio 2008 y WPF Forms.


Primeramente definamos WPF. Bien pues WPF es Windows Presentation Foundation, una nueva tecnología para la construcción de la interfaz de usuario en windows que se ha agregado como pilar fundamental en la liberación del .NET Framework 3.0 y que se ha mejorado y extendido en el .NET Framework 3.5. WPF dentro del desarrollo de aplicaciones utiliza un lenguaje de marcado basado en XML al que se le denomina XAML (eXtensible Application Markup Language), este lenguaje de marcado es utilizado también por WF (Workflow Foundation) y por WCF (Windows Comunication Foundation), y tiene las mismas reglas que XML, tales como el contenido único de un elemento raíz, la utilización de Etiquetas de apertura y cierre, el uso de parámetros, y también el uso de Namespaces, básicamente es XML, y la diferencia es que en XAML se tienen espacios de nombres con la definición específica de los elementos de la aplicación, en nuestro caso nos ocupa WPF, por lo que encontraremos que la definición de la ventana, y los controles de una aplicación WPF para Windows estará definida completamente en XAML con etiquetas propias para esta tarea.


Para introducirlos a WPF, siempre se comenta que si han utilizado ASP.NET  pues les será muy familiar, ya que las páginas de ASP.NET están definidas con XHTML de una forma muy parecida a como se definen en XAML  los controles, pero bueno, ya ustedes encontrarán la similitud.


Bien, hablando de aplicaciones WPF para Windows, veremos que el elemento raíz de la ventana es nada más y nada menos que… Window; aunque no les parezca lógico, pero es así, la definición es simple, sin embargo siempre incluye la declaración de ciertos espacios de nombres necesarios para la presentación de la interfaz de usuario, aquí les muestro un ejemplo:


<Window x:Class=”Window1″


    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”


    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>


   


</Window>


Podemos ver que se utiliza la etiqueta Window y como parámetros se incluyen la declaración de dos espacios de nombres y un parámetro que indica la clase con la que se asocia la funcionalidad de la ventana. Ahora bien, las propiedades de la ventana se definen de igual manera dentro de esta etiqueta, digamos que el alto y ancho de la venta, así como su título, eventos y otras propiedades serán puestos como parámetros en esta etiqueta, como les muestro a continuación:


<Window x:Class=”Window1″


    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”


    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”


    Title=”Window1″ Height=”100″ Width=”300″ >


   


</Window>


En este bloque se puede ver que agregué el título y las propiedades Height y Width, cabe hacer notar que los valores de las propiedades están escritos entre comillas y siempre serán tomados como texto. Este código se guarda en un archivo con extensión .XAML y está ligado a un archivo .CS o .VB según sea C# o Visual Basic, en el cual se escribirá la funcionalidad de la ventana utilizando el lenguaje que ya conocemos.


Ahora, lo que falta…. Ya tengo mi ventana, pero dónde voy a dibujar mis controles, cómo los voy a ordenar y cómo se van a mostrar. Cuando se crea una ventana WPF en Visual Studio 2008 se agrega esta declaración y además se agrega dentro del elemento Window un control denominado Grid, que no debemos confundir con el DataGrid que se utilizaba anteriormente. Este control Grid será el que se encarga de mostrar los controles en el orden que nosotros definamos y puede ser utilizado análogamente como una tabla de HTML, se pueden definir columnas y renglones y confinar los controles a una celda específica. Veamos primeramente cómo se muestra la ventana al ser creada por primera vez:


<Window x:Class=”Window1″


    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”


    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”


    Title=”Window1″ Height=”100″ Width=”300″ >


    <Grid>


       


    </Grid>


</Window>


En este ejemplo el elemento Grid, no tiene definida ninguna propiedad por lo que el ancho y alto será limitado por la dimensión definida en la ventana, esto es  100 x 300, y no se han definido propiedades por los siguiente; el Grid se verá como el área de trabajo para el diseño de la venta, por esta razón no define ninguna propiedad. Otra de las razones importantes de utilizar un Grid es porque de no hacerlo solo podríamos declarar un control dentro de la ventana, ya que entre la etiqueta se apertura y cierre, que corresponde a la propiedad Content (contenido) de la ventana, solo puede contener un control, en cambio, el Grid, puede contener a varios controles.


Agregaré un control TextBlock, para ilustrar algunas de las propiedades básicas de los controles utilizados dentro de un Grid:


<Window x:Class=”UsoWPF.Window1″


    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”


    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”


    Title=”Window1″ Height=”100″ Width=”300″>


    <Grid>


        <TextBlock Margin=”10,10,10,0″ Text=”Espere un momento…”


                   Height=”25″ VerticalAlignment=”Top”/>


    </Grid>


</Window>


Como se puede observar, el TextBlock tiene definidas algunas propiedades; Margin, Text, Height y VerticalAlignment. La propiedad Text pues no tiene mucho que decir, pues es la que se encarga de mostrar el texto. Las otras propiedades tienen sus particularidades.


En general la propiedad Height está presente en la mayoría de los controles, y es para indicar la altura del mismo, si no se define, o en algunos casos se define el valor Auto, el control tomará la altura del contenedor, en este caso del Grid, lo mismo pasa con la propiedad Width que no he definido en el ejemplo, con lo que el control se ajustará al ancho del Grid, pero… sí, hay un pero, estoy definiendo la propiedad Margin, que define el margen del control, esto es, la distancia que guarda un control con los límites de su contenedor.


 La propiedad Margin, se escribe con cuatro valores separados por comas que definen la distancia entre los límites de su contenedor en el siguiente orden:  margen izquierdo, margen superior, margen derecho, margen inferior.


En este caso, aunque el TextBlock no define el ancho, se ajustará al Grid manteniendo la distancia de 10 pixeles entre el extremo derecho e izquierdo, además,  mantendrá una distancia de 10 pixeles con la parte superior,  y podríamos suponer que tendría una distancia al inferior, sin embargo, al declararse el valor de la propiedad Height se descarta el valor inferior del margen quedando el control con la altura definida en Height.


En el ejemplo utilicé la propiedad VerticalAlignment con el valor “Top”, esta propiedad tiene cuatro valores; Bottom, Center, Stretch y Top. En sí es la alineación vertical donde se indica que el control puede estar alineado verticalmente en la base de su contenedor, en el centro, ajustarse al tamaño en relación al tamaño de su contenedor o en la parte superior. VerticalAlignment es el sustituto de la propiedad Anchor que se utilizaba para anclar un control, pero solo con respecto a su posición vertical. Si se define el valor Bottom, el control se anclará en la parte inferior, si se define Top el control se anclará en la parte superior, si se define Center el control se anclará en el centro del contenedor y si se define Stretch el control se ajustará al tamaño del contenedor de manera proporcional. Para completar el anclaje del control tendría que definirse además la propiedad HorizontalAlignment, que puede tener uno de los siguientes valores; Center, Left, Right o Stretch, que tienen un comportamiento análogo al VerticalAlignment solo que de modo horizontal.


La ubicación de los controles se da con la combinación de las propiedades Height, Widht, VerticalAlignment, HorizontalAlignment y Margin. Si se utilizan las primeras cuatro, Margin no tendrá efecto en el control en alguno de sus valores, un ejemplo es el que se muestra en el código de arriba. Otro caso es si se define VerticalAlignment = “Top” y HorizontalAlignment = “Left”, entonces los valores de margen derecho y margen inferior serán descartados. Esto debido a que el control queda anclado en la parte superior izquierda de su contenedor.


Bien, pues con esto quiero concluir esta introducción, esperando que quede claro el concepto de XAML y la manera en que se posicionan los controles en una ventana de WPF.


Espero que les sea de utilidad.


Saludos…


Octavio Telis

4 thoughts on “Introducción al uso de XAML en WPF”

  1. Bueno, pues, no hay ventajas sobre VB.NET, dado que VB.NET en la versión 9, utiliza WPF en los proyectos específicos para esta plataforma. Como ventaja principal al modelo de interfaz de usuario anterior, es que WPF prácticamente no te pone límites para que la interfaz de usuario la diseñes como más te guste.

    Saludos…

    Octavio Telis

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>