Los controles contenedores en WPF

Hola ¿qué tal?


Continuando con XAML y WPF quisiera continuar en esta ocasión con el uso de los controles contenedores que se tienen disponibles para el diseño de la interfaz de usuario desde Visual Studio 2008.


Ahora vamos a ver lo que hay en el diseño de formularios con WPF que nos permitirá dibujar la interfaz de usuario de una manera ordenada. En WPF existen algunos controles que se definen como contenedores con características particulares, algunos con similitudes a los utilizados en HTML y otros utilizados típicamente de versiones anteriores y unos más que surgieron de conceptos del diseño de la interfaz de usuario de la versión anterior de Windows Forms. No iré muy a fondo en cada uno, ya que se encuentra mucho acerca de cada control en la ayuda, sin embargo, mencionar los rasgos generales nos dará una idea de su uso para ubicarnos rápidamente en la construcción de la interfaz de usuario.


Canvas


Definido por las etiquetas <Canvas></Canvas>, al utilizar este control el diseño de la interfaz de usuario se vuelve simple y permite colocar controles en el área contenedora de manera relativa a las propiedades Canvas.Left y Canvas.Top que se definen directamente en el control, cabe mencionar que la propiedad Margin se combina con dichas propiedades, esto es, Canvas.Left se suma con la distancia a la izquierda de Margin, y Canvas.Top se suma con la distancia superior de Margin. Desde el diseñador de Visual Studio se pueden mover los controles de manera libre en cualquier posición dentro del canvas.


Grid


Definido por las etiquetas <Grid></Grid>, es parecido al canvas, y se puede utilizar de igual manera, sin embargo a diferencia del anterior, en un grid se pueden definir sub regiones contenedoras establecidas por columnas (Grid.Column) y renglones (Grid.Row) similar a una tabla, creando celdas, donde los controles se posicionan relativos al área delimitada por la celda, permitiendo con esto un arreglo ordenado de la interfaz de usuario. En el diseñador de Visual Studio se puede mover el control de manera libre, sin embargo, para que se limite el control a una celda del grid se deberá especificar las propiedades Grid.Column y Grid.Row en el mismo, ya que de no hacerlo se tendrá un efecto parecido al canvas dejando al control libre en el área total del Grid.


DockPanel


Definido por las etiquetas <DockPanel></DockPanel>, que  es el reemplazo de la propiedad Dock de los controles de versiones anteriores, ahora en WPF, se utilizan paneles para definir las áreas de específicas del formulario. Es rígido con los controles, al colocarlos no es simple manipularlos en su interior, por lo que se recomienda incluir un Canvas o un Grid por comodidad, la importancia de este control es para ubicar las áreas del formulario, las cuales se definen estableciendo las propiedades VerticalAlignment para definir el Top, Center, Bottom o Stretch, y la propiedad HorizontalAlignment para definir el Left, Right, Center, Stretch. Cabe mencionar que al utilizar Stretch en ambas propiedades da un resultado parecido a Fill, también es prudente mencionar que se debe utilizar la propiedad Margin para ubicar bien los paneles en sus límites con otros paneles.


StackPanel


Definido por las etiquetas <StackPanel></StackPanel>, este control es semejante al DockPanel, sin embargo se utiliza más para definir un conjunto de controles ordenados, ya sea de modo horizontal o vertical, los controles se ordenen en el mismo orden que se describen dentro del XAML, respetan los márgenes verticales (Top, Bottom) de los controles al estar orientados de manera vertical, y de la misma manera respetan los márgenes horizontales (Left y Right) de los controles  al estar orientados de forma horizontal. La orientación de los controles se define con la propiedad Orientation que tiene dos valores, Vertical y Horizontal. Es útil utilizar este control para hacer composiciones de controles, digamos como agrupar un TextBlock con un TextBox como una sola pieza dentro de otros controles contenedores manteniendo su relación de aspecto.


Existen otros controles contenedores como El GroupBox y el TabItem, sin embargo estos se utilizan con los controles anteriores, ya que solo pueden contener un control, por lo que es recomendable utilizar un grid o un canvas para mostrar el contenido. El GroupBox tiene una propiedad Header que hace más visible la conceptualización de un grupo de controles. El TabControl depende de otro control, el TabItem para mostrar los tabs o pestañas, y tiene la misma limitante que el GroupBox.


Pues bien, espero que sea de utilidad esta información para ubicar rápidamente los elementos primarios del diseño de la interfaz de usuario con WPF. Más detalles del funcionamiento, eventos y propiedades de estos controles lo pueden encontrar en el MSDN Library, ya sea en línea (http://msdn.microsoft.com/library) , o bien en el que se instala con visual studio o las versiones express de visual studio.


 


Temas relacionados:


http://msmvps.com/blogs/otelis/archive/2009/02/25/introducci-243-n-al-uso-de-xaml-en-wpf.aspx


 


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>