Introducción al desarrollo con Windows Phone (7.5) Parte III

Introducción al desarrollo con Windows Phone (7.5) Parte I

Introducción al desarrollo con Windows Phone (7.5) Parte II

Una parte muy importante del diseño de las aplicaciones Silverlight y WPF es el conjunto de controles contenedores existentes, y su funcionalidad. Entender su funcionamiento nos ahorrará horas de diseño, y nos permitirá construir la interfaz gráfica in apenas mirar el resultado.

Comenzamos con el contenedor más común y genérico, el Grid . Como su nombre indica, es un control rejilla que nos permitirá organizar controles de una manera sencilla (No lo confundamos con un control tipo DataGrid, no tienen relación). Este contenedor se ajusta automáticamente a su contenedor (su control padre), es decir, abarcará todo el espacio disponible, limitado por el control que contiene a nuestro Grid. Además, se podrán definir filas y columnas para organizar los controles hijos. Si tomamos como ejemplo un Grid en una página, en su propiedad Background estableces un color (rojo por ejemplo), e incluimos un control Button, vemos que el Grid ocupa toda la página, al igual que su control contenido.

Figura 01 – Resultado de un Grid con un control hijo

¿Y si añado más controles al Grid? Si introducimos otro control Button al Grid, observamos que se produce un comportamiento no deseado, los controles se superponen.

Figura 02 – Los textos se superponen

Esto ocurre porque el Grid es un contenedor con la única finalidad de contener, si no indicamos cómo queremos organizar los controles dentro de él, los superpondrá. Así que lo primero que vamos a hacer, es especificarle filas a nuestro contenedor.

Figura 03 – Grid con Filas

Definiendo dos filas en el Grid, y estableciendo la propiedad adjunta Grid.Row de cada elemento hijo, tendremos nuestros controles organizados y sin superponerse. Aunque como vemos, si en la definición de las filas no indicamos tamaño, se repartirán el espacio disponible a partes iguales, en este caso, la mitad cada una. Existe la opción de establecer el alto de fila en el valor Auto, por lo que la fila ocupará el espacio justo que necesite el contenido de la fila, o un alto especificado en pixels. Además de filas, también podemos definir las columnas del Grid, establecer RowSpan y ColumSpan a los hijos... y todo lo que necesitemos para organizar los controles.

Figura 04 – Grid con una distribución más compleja

Otro contenedor muy utilizado es el StackPanel . Este contenedor coloca los controles contenido en formato lista, ya sea horizontal o vertical, y al contrario que ocurre con el Grid, no colocará los controles contenidos superpuestos. Además, dependiendo de su orientación, una dimensión de los controles contenidos será limitada (a no ser que se especifique un tamaño para esa dimensión)

Figura 05 – StackPanel Vertical

Figura 06 – StackPanel Horizontal

Otro tipo de contener es Canvas . Este control es el que más precisión proporciona, pero también el que más problemas nos puede causar. A través de sus propiedades adjuntas, podremos indicar la posición de los controles contenidos en relación al Canvas, en pixels.

Figura 07 – Ejemplo de Canvas

Aunque pueda parecer que el contenedor más sencillo y más utilizado es este último, ocurre lo contrario. El control Canvas puede dar bastantes dolores de cabeza, ya que las posiciones del contenido son fijas, y en caso de redistribuir o cambiar la orientación, hay que hacerlo a mano. El uso de este contenedor es frecuente cuando utilizamos objetos Path, Ellipse o similar, ya que requieren posiciones exactas.

Como vimos en el artículo anterior, la librería Toolkit proporciona controles adicionales, uno de ellos es un control muy sencillo y cómodo, disponible en WPF pero no en Silverlight, y por lo tanto, tampoco en Windows Phone. Hablo del contenedor WrapPanel . Su funcionamiento es similar al StackPanel, con la diferencia de que, una vez los controles ocupen toda el tamaño disponible, se creara una nueva fila o columna, dependiendo de su orientación. Como podemos observar, los elementos hijos de este contenedor tendrán el tamaño mínimo en sus dos dimensiones, mientras que en el StakPanel lo hacía en una sola, y ninguna en el Grid.

Figura 08 – WrapPanel del Toolkit

Ahora ya conocemos los contenedores básicos disponibles, en la próxima entrega veremos algunos controles básicos, sus propiedades y cómo funcionan.

Si quieres aprender más secretos, configuraciones, integraciones, desarrollo de PowerShell te recomendamos leer el libro de Pablo González y Ruben Alonso “PowerShell: La navaja suiza de los administradores de sistemas”. Si quieres conocer las novedades y secretos de la nueva versión del sistema operativo servidor de Microsoft te recomendamos Windows Server 2012 para IT Pros. Si quieres aprender mucho más sobre los secretos de lo sistemas Microsoft Windows, te recomendamos leer el libro de Sergio de los Santos “Máxima Seguridad en Windows: Secretos Técnicos ” y, por último, te recordamos que si te ha gustado el artículo puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.

via Windows Técnico http://www.windowstecnico.com/archive/2012/10/11/introducci-243-n-al-desarrollo-con-windows-phone-7-5-parte-iii.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+WindowsTecnico+%28Windows+Tecnico%29