.NET Chronicles

Temas relacionados con el desarrollo de aplicaciones con .NET

Octavio Telis

Monthly Archives: February 2009

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

.NET Chronicles
  • Eventos del Teclado en WPF July 22, 2015
      Hola ¿qué tal? En esta ocasión como como continuidad a lo que previamente había escrito sobre los eventos del teclado en Windows Forms, haré un artículo sobre el uso de los eventos del teclado en WPF, así es en Windows Presentation Foundation. No es desconocido por muchos que el nuevo estándar de desarrollo de […]
  • Programación Orientada a Objetos (Introducción) May 14, 2014
    Hola qué tal… Aquí les dejo este video sobre la programación orientada a objetos, a manera de preámbulo a los siguientes videos, con las bases de la programación en C# y otra línea con algunas utilerías. Saludos… Octavio Telis
  • Capítulo piloto del la versión en video de .NET Chronicles May 6, 2014
    Hola qué tal??? Pues en esta ocasión estoy compartiendo con ustedes la liga de un video piloto, con el que pretendo comunicar un poco más sobre las tecnologías .NET y los lenguajes de Programación. En esta ocasión será con la presentación de C#, en un capitulo titulado “Te presento a C#”, espero que sea de […]
  • Validación de datos de entrada con enlace a datos en WPF May 27, 2012
    Tweet Hola, qué tal. Ya que he venido hablando del enlace a datos en WPF en las publicaciones anteriores, bien convendría considerar el uso del Binding para validar datos, hemos tocado ya algunos puntos necesarios para escribir esta funcionalidad. En las publicaciones anteriores vimos ya como enlazar los datos, además, cómo convertir los datos, ahora, […]
  • Uso de la propiedad Visibility con valores booleanos en WPF May 25, 2012
    Tweet    Hola que tal. En esta ocasión quiero compartir con ustedes una manera para utilizar la propiedad Visibility con un valor bool. Te preguntarás “¿Y qué sentido tiene eso?”, bien, el detalles está en que en ocasiones se requiere que la visibilidad de un control de la interfaz de usuario responda a un valor […]
  • Conversión de Valores con Enlace a Datos May 24, 2012
    Tweet     Hola que tal. En el diseño de aplicaciones con WPF tendremos muchas ventajas en cuanto a la interfaz de usuario se refiere, dado que es un modelo muy flexible, nos permite dar formato y estilo a la apariencia de la interfaz de usuario, logrando aplicaciones más agradables, vistosas y que mejoran por mucho […]
  • Mostrar archivos de imagen en WPF utilizando enlace a datos. May 23, 2012
    Tweet Holal Qué tal. Continuando con el ejemplo del post anterior (http://bit.ly/oh0m9k), referente al manejo de imágenes en WPF, ejemplificaremos el manejo de las imágenes de la misma manera pero, esta vez, utilizando enlace a datos y la clase Binding. Antes, tenemos que hablar un poco de lo que es el enlace a datos con […]
  • Mostrar archivos de imagen en WPF August 26, 2011
    Hola Qué Tal… En esta ocasión quiero comenzar una serie de artículos sobre el manejo de archivos de imágenes con .NET. En esta primera parte voy a tratar la manera de cargar un archivo de imagen en un contenedor de imagen, en este caso usaré WPF y el control Image que viene incluido en el […]
  • Comparar dos DataTables según sus DataRows August 23, 2011
    Hola que tal. En ocasiones es necesario comparar el contenido de dos DataTable para determinar qué registros (DataRow) están en una y en otra no. Supongamos tenemos dos DataTable; dt1 y dt2, ambas con el mismo esquema. La tabla dt2 contiene más registros que la taba dt1, por lo que deseamos saber qué registros de […]
  • Arquitectura – Definición de un Data Access Component (con un ejemplo) Parte 3 May 14, 2010
    Hola Qué Tal? En esta ocasión, no he dejado pasar tanto tiempo para terminar la trilogía del uso de Data Access Component con un ejemplo. Bien, pues en este artículo veremos el uso del componente ya creado, cómo extenderemos la funcionalidad del componente y cómo lo aplicamos en la interfaz de usuario. Primeramente, debemos crear […]