Tutorial Silverlight Parte 2: Administración de Layout

Esta es el segundo de ocho tutoriales en el que estamos creando un cliente de Digg con la Beta 1 de Silverlight 2. La idea es que estos tutoriales se lean en orden, con el objetivo de explicar los fundamentos de la programación con Silverlight.

Podéis descargar el código completo del cliente Digg del ejemplo aquí

Entendiendo la administración de Layout

Silverlight y WPF soportan un sistema de layout que permite a desarrolladores y diseñadores coordinar fácilmente cómo se posicionan los controles en la interfaz de usuario. Este sistema de layout soporta tanto un modelo de posición mixta, en el que los constroles se posicionan en unas coordenadas explícitas, y un modelo dinámico, en el que los controles se redimiensionan automáticamente a medida que lo hace el navegador.

Los desarrolladores que usen Silverlight y WPF usan layout panels para coordinar la posición y el redimensionado de controles que contienen. Los paneles integrados en Silverlight Beta 1 incluyen los tres más comunes de WPF:

  • Canvas
  • StackPanel
  • Grid

Canvas

El panel Canvas es muy básico que soporta la posición de los controles que contiene con coordenadas explicitas.

Los elementos se posicionan en el canvas con una característica de XAML llamada Propiedades Adjuntas("Attached Properties") - que nos permiten especificar la posición del control relativa al margen derecho, alto, derecho o bajo del contenedor Canvas. Esta característica es útil ya que permite que un panel padre extienda el conjunto de propiedades de un control que contenga. Canvas, por defecto tiene las propiedades adjuntas Top y Left para definir esto en los controles que contenga, sin tener que añadir ninguna propiedad a estos últimos, o modificar sus clases.

Podríamos añadir dos botones a un Canvas, y posicionarlos a 50 pixels del borde izquierdo, y a 50 y 150 pixels del borde superior (Canvas.Left y Canvas.Top son ejemplos de la sintaxis de las propiedades adjuntas):

Esto se renderiza de la siguiente manera:

El Canvas es muy útil en escenarios en el que los elementos de la interfaz de usuario no se mueven nunca, no tiende a ser muy flexible cuando necesitamos muchos controles que se redmiensionen o muevan. En estos casos terminamos por escribir código que haga que el Canvas se comporte como queremos (es muy duro).  Una mejor solución para estos escenarios dinámicos es usar otro panel pensado para ello - como son StackPanel y Grid.

StackPanel

Este control es un panel simple que soporta el posicionamiento de los controles que contenga en forma de fila o columna. Los StackPanels se usan cuando nos interesa organizar una parte de la interfaz de la página.

Por ejemplo, podemos usar un StackPanel para organizar verticalmente tres botones con XAML:

Y este es el resultado en tiempo de ejecución:

Podríamos haber puesto la propiedad "Orientation" para que el StackPanel sea horizontal y no vertical:

Obteniendo el siguiente aspecto:

Grid Panel

Este control es el panel más flexible, y soporta la agrupación de controles en varias filas y columnas. Conceptualmente es similar al elemento Table en HTML.

Sin embargo, no embebemos controles dentro de las columnas  y filas. Sino que definimos las columnas y filas con <Grid.RowDefinitions> y <Grid.ColumnDefinitions> justo despues del control <Grid>. Podemos usar las propiedades adjuntas en los controles contenidos en el grid, indicando que fila y columna deben rellenar.

Por ejemplo, declaremos un Grid con tres filas y tres columnas, y pongamos 4 botones:

El Grid posicionará los botones de la siguiente manera:

Además de soportar un tamaño absoluto(por ejemplo: Height="60") los controles RowDefintion y ColumnDefinition también soportan el modo automático (Height="Auto"), que ajusta automáticamente el tamaño (también podemos especificar un tamaño máximo y mínimo - puede ser muy útil).

Estas RowDefinition y ColumnDefinitions tienen la propiedad "Porportional Sizing" - que hace que el tamaño de las filas y columnas se redimensionen proporcionalmente en relacion a las otras (por ejemplo: podemos hacer que la segunda fila crezca dos veces más que la primera).

Veréis que este Grid es muy flexible - y seguramente será el panel más comun que vayamos a usar.

Uso de paneles para agrupar la página de Digg

Recordad que lo queremos es crear una página de ejemplo de Digg con el siguiente aspecto:

Para crear este aspecto emos añadido un Grid raíz con dos RowDefinitions. La primera será de 40 pixeles de alto y la segunda cojerá el resto del espacion (Height="*"):

Nota: Fijáos que he puesto la propiedad "ShowGridLines" a "true". Esto nos permite visulaizar más fácilmente las filas y columnas cuando testeamos:

Ahora metemos un segundo Grid como hijo del primero en la primera fila, y lo usamos para agrupar la cabecera. creamos tres columnas en el- una para el tículo, otra para el texto de búsqueda y otro para el botón de búsqueda:

Con esto tenemos el layout básico de nuestra página de búsqueda de Digg:

Nota: Una alternativa a anidar Grids, es usar un Grid con 3 columnas y 2 filas, y usar las propiedades ColSpan/RowSpan del grid para unir varias columnas (igual a como se hace con tablas HTML). He usado dos Grids anidados ya que creo que es más fácil de seguir.

Ahora que tenemos el layout todo lo que necesitamos es añadir los controles que necesitamos.

Para la cabecera usaremos el control <Border> (Con un radio de 10 para que quede bien) y añadiremos texto para crear el título. Usamos el control <WatermarkedTextBox> en la segunda columna para el textbox de búsqueda. Y ponemos un <Button> en la tercera columna. Ponemos un bloque de texto en la segunda fila en la que vamos a mostrar los resultados.

Nota: En la siguiente captura estoy añidendo información de estilo (FontSize, Colores, Margenes, etc) directamente en los controles. En otros post veremos cómo usar Styles para extraer y encapsular estas opcines en un archivo a parte (como CSS) que podremos usar en toda la aplicación.

Ahora ejecutamos la aplicacion:

Redimensionado dinámico de la aplicación

Una cosa que habréis fijado en el XAML anterior es que el control de arriba está configurado para que tenga un ancho y algo fijo:

Cuando lo configuramos de esta manera, la aplicación Silverlight siempre tendrá ese tamaño. Si expandimos el navegador lo vemos:

En algunos escenarios esto puede ser válido, pero en neustro caso queremos que se redimensiones automáticamente con el navegador - como haría una página HTML.

Esto es muy sencillo de conseguir. Eliminamos estos atributos de nuestro control:

Nuestra aplicación Silverlight se expandirá (o encojerá) para llenar el contenedor HTML. Ya que el archivo SilverlightTestPage.html con el que estamos testeando el control Silverlight lo contiene dentro de un <div> con un width y height al 100%, ahora nuestra aplicación sera:

Fijáos cómo el contenido de la cabecera se ajusta al ancho del navegador:

Cuando encojemos el navegador, el textbox y el boton de búsqueda tienen el mismo tamaño, ya que las columnas del grid que los contienen tienen un ancho fijo. El control <Border> que contiene el título se redimensiona porque la columna está configurada con Width="*".

No tenemos que escribir ninguna línea de código para conseguir este comportamiento - el grid contenedor y el sistema de layout se encargan de redmiensionar todo por nosotros.

Próximos pasos.

Ahora tenemos la interfaz básica para nuestra aplicacion y ya tenemos definida la cabecera.

Lo siguiente es implementar el comportamiento de búsqueda de la aplicación - y obtener el contenido de Digg.com cuando un usuario haga una búsqueda.

Traducido por: Juan María Laó Ramos.

Artículo original.

13 pensamientos en “Tutorial Silverlight Parte 2: Administración de Layout

  1. Pingback: Primer vistazo a Silverlight 2 « Thinking in .NET

  2. Pingback: Primer vistazo usando Expression Blend con Silverlight 2 « Thinking in .NET

  3. Pingback: Tutorial de Silverlight en Español « Thinking in .NET

  4. Pingback: Tutorial de Silverlight en Español - Silverlight - GUN

  5. Vio

    Muchas gracias Victor.
    De vez en cuando palabras como la tuya alegran y empujan a seguir haciendo este “trabajo”.

  6. Hil

    Gracias por el tutorial, esta muy bueno.
    Solo una duda amino me aparecio la opcion de
    WatermarkedTextBox me marca error. Saludos

  7. JoseLuis

    Por que en la version Silverlight 2 estable no aparece este control , como lo agrego ?? por lo que veo solamente aparece en la version Beta , o tendre que esperar a que salga la version 3. Si nos puedes ayudar como agregar el control en la version estable.

  8. Gerard Muñoz

    A partir del Beta 2 del Silverlight 2 se eliminó el control WatermarkedTextbox, pero este ejemplo esta construido con el Beta 1 del Silverlight, para el caso de este tutorial igual se puede reemplazar por el control Textbox.

Los comentarios están cerrados.