Home > MVA, Tutoriales, WP7 > Distribución en la Pantalla

Distribución en la Pantalla

Distribución en la pantalla

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Layout_on_the_Screen.  

Silverlight para Windows Phone 7 te proporciona un sistema de distribución flexible que te permite especificar qué controles se colocan en la pantalla. Este tutorial te describe cómo diseñar una interfaz de usuario que cambia automáticamente su tamaño según las resoluciones de pantalla.

Contendrá las siguientes secciones:

  • Información general de Distribución
  • Distribución absoluta
  • Distribución dinámica
  • Paneles

Información general de Distribución

Distribuir es el proceso de ajustar el tamaño y el posicionamiento de los objetos en tu aplicación de Silverlight para Windows Phone. Para posicionar objetos visuales, debes utilizar un Panel u otro objeto contenedor.  Silverlight proporciona varios Panel, tales como Canvas, StackPanel y Grid, que sirven como contenedores y permiten posicionar y organizar los controles.  

El sistema de distribución de Silverlight para Windows Phone soporta tanto distribuciones absolutas distribuciones dinámicas. En la distribución absoluta, los controles son posicionados utilizando las coordenadas explícitas x / y (por ejemplo, utilizando un Canvas). En la distribución dinámica la interfaz de usuario automáticamente cambia su tamaño según las distintas resoluciones de pantalla (por ejemplo, usando un StackPanel o Grid).    

Distribución absoluta

En una distribución absoluta, los elementos hijos se organizan en un panel de distribución,  especificando su ubicación exacta en relación con el elemento padre. El posicionamiento absoluto no toma en cuenta el tamaño de la pantalla. Si su aplicación requiere la posición absoluta de la interfaz de usuario, podrás diseñar diferentes páginas para diferentes resoluciones de pantalla, o utilizar el escalamiento como una alternativa.

Silverlight para Windows Phone ofrece un Canvas para soportar el posicionamiento absoluto. De manera predeterminada, al crear un nuevo proyecto para la aplicación de Windows Phone, el panel raíz de la distribución será un Grid. Para crear una distribución basada en posicionamiento absoluto, debes reemplazar el Grid por un Canvas.

Para colocar los controles en un Canvas, se establecen las siguientes propiedades adjuntas con el control. Cuando se utiliza el diseñador en Visual Studio, estas propiedades se actualizan cuando se arrastran los controles en la superficie de diseño. Estas propiedades son:

·         Canvas.Left

·         Canvas.Top

Distribución Dinámica

En una distribución dinámica, la interfaz de usuario aparece correctamente en varias resoluciones de pantalla. Acomodas elementos hijos especificando cómo deben ser acomodados y como deben ser ajustados de manera relativa a su padre. Por ejemplo, puedes organizar los controles en un panel y especificar que se deben envolver horizontalmente.  Para utilizar un tamaño automático o proporcional, debes asignar valores especiales a las propiedades Height y Width. Los siguientes, son los valores recomendados para una distribución dinámica:

·         Establece el Height y Width de los controles de distribución en Auto. Cuando estos valores se utilizan para los controles en el Grid de distribución, los controles rellenan la celda que los contiene. El tamaño automático es soportado por los controles y por los contenedores de distribución Grid y StackPanel.

·         Para los controles que contienen texto, elimina las propiedades Height y Width, y establecer las propiedades MinWidth o MinHeight. Esto evita que el texto se reduzca proporcionalmente a un tamaño que sea ilegible.

·         Para establecer los valores proporcionales para los elementos  RowDefinition y  ColumnDefinition en un Grid de distribución, utiliza los valores relativos de Height y Width. Por ejemplo, para especificar que una columna es cinco veces más ancha que otra columna, utilice "*" y "5 *" para la propiedad Width en el elemento ColumnDefinition.

Tamaños Auto y Proporcional (Asterisco)

El tamaño automático se utiliza para permitir a los controles ajustar su contenido, incluso, aun cambiando el tamaño del mismo.  El tamaño proporcional es utilizado para distribuir el espacio disponible entre las filas y columnas de un Grid en proporciones ponderadas. En el XAML, los valores se expresan con un asterisco * (o N*).  Por ejemplo, si tienes un Grid con cuatro columnas, puedes establecer el ancho de las columnas en valores indicados en la siguiente tabla:

Columna_1

Auto

Tamaño de la  columna para ajustarse a su contenido

Columna_2

*

Después que se calculan las columnas en Auto, la columna se ajusta a la anchura restante. La columna 2 tendrá será ancha como la columna 4

Columna_3

Auto

Tamaño de la  columna para ajustarse a su contenido

Columna_4

2 *

Después que se calculan las columnas en Auto, la columna se ajusta a la anchura restante. La columna 4 será dos veces más ancha que la columna 2

Para obtener más información acerca de tamaños Auto y Proporcional, consulte la enumeración GridUnitType

Paneles

Los paneles pre construidos en Silverlight para Windows Phone son el Canvas, StackPanel y Grid.

Canvas

Define un área en la que pueden colocarse explícitamente elementos hijos utilizando las coordenadas relativas del área del Canvas. El Canvas es útil para situaciones en las que los elementos contenidos dentro de la interfaz de usuario son estáticos.  

Puedes colocar el control dentro del Canvas especificando las coordenadas X y Y. Las coordenadas X y Y se especifican mediante las propiedades adjuntas Canvas.Left y el Canvas.Top.  Canvas.Left especifica la distancia del objeto del lado izquierdo que contiene el Canvas (Coordenada X) y Canvas.Top especifica la distancia del objeto en la parte superior del Canvas (coordenada Y).

El siguiente XAML muestra cómo colocar un rectángulo de 30 píxeles a la izquierda y 200 píxeles a la parte superior de un Canvas.  

XAML

 

<Canvas Background="Transparent">

    <Rectangle Canvas.Left="30" Canvas.Top="200"

 Fill="Red" Width="200" Height="200" />

</Canvas>

El XAML anterior genera un resultado similar a la siguiente ilustración.

image

StackPanel

El StackPanel es un panel de distribución que organiza sus elementos hijos en una sola línea, de manera que puedan ser orientados de forma horizontal o vertical. Puedes utilizar la propiedad Orientation, para especificar la dirección de los elementos hijos. El valor predeterminado para la propiedad Orientation es Vertical. El StackPanel se utiliza normalmente en escenarios en los que se desea organizar una pequeña subdivisión de la interfaz de usuario de tu página.

El siguiente XAML muestra cómo crear un StackPanel vertical de elementos.

XAML

 

<StackPanel Margin="20">

<Rectangle Fill="Red" Width="50" Height="50" Margin="5" />

<Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />

<Rectangle Fill="Green" Width="50" Height="50" Margin="5" />

<Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />

</ StackPanel>

El XAML anterior genera un resultado similar a la siguiente ilustración.

image

Grid

El Grid es el panel de distribución más flexible, y apoya la organización de controles de varias filas y columnas para la distribución. Puedes especificar las filas y columnas de un Grid utilizando las propiedades Grid.RowDefinitions y Grid.ColumnDefinitions que son declaradas dentro del Grid. Puedes colocar los objetos en celdas específicas en el Grid mediante las propiedades adjuntas Grid.Column y Grid.Row. También puedes distribuir el espacio dentro de una columna o una fila mediante el Tamaño Auto o proporcional como se explicó anteriormente. El contenido puede abarcar varias filas y columnas mediante las propiedades adjuntas RowSpan y ColumnSpan.

Los elementos hijos del Grid se dibujan en el orden en que aparecen en el código. Como resultado el orden de las capas (también conocida como orden Z) se puede lograr cuando los elementos comparten las mismas coordenadas.  Para obtener más información acerca de orden Z, visualiza ZIndex.

El siguiente XAML muestra cómo crear un Grid con tres filas y dos columnas. La altura de las filas primera y tercera, serán lo suficientemente grandes como para contener el texto. La altura de la segunda fila llenará el resto de la altura disponible. El ancho de las columnas es dividido en partes iguales.

XAML

<Grid ShowGridLines="True" Margin="12,0,12,0">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<TextBox Text="1st row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="0" />

<TextBox Text="3rd row 1st column" TextWrapping="Wrap" Grid.Column="0" Grid.Row="2" />

<Button Content="1st row 3rd column" FontSize="17" Grid.Column="1" Grid.Row="0" />

<Button Content="3rd row 2nd column" FontSize="17" Grid.Column="1" Grid.Row="2" />

</Grid>

 El XAML anterior genera un resultado similar a la siguiente ilustración.

image

Si vas a crear una distribución más compleja que no se logre fácilmente mediante el uso del Canvas, StackPanel o Grid, puedes crear un panel personalizado que te permita definir el comportamiento de la distribución de sus elementos hijos.  Para ello, crea una clase que derive de la clase Panel y reemplaza los métodos MeasureOverride y ArrangeOverride.  Para obtener más información, visualice Paneles Personalizados.

  1. November 23rd, 2011 at 14:32 | #1

    HAY COSAS QUE NO ENTIENDO, PERO TIENE LO NECESARIO PARA LO QUE NECESITO, GRACIAS

  2. Alejo
    February 14th, 2012 at 15:41 | #2

    Excelente Rdiaz!

  3. Angel
    October 9th, 2012 at 19:48 | #3

    Son muy interesantes los datos presentados en este tutorial

  4. Andres
    January 14th, 2013 at 21:05 | #4

    interesante tuto… gracias… ahora se como organizar mis elementos dentro del telefono….

  5. jorge
    September 10th, 2013 at 22:04 | #5

    No entiendo, algo tan simple como width=”20%” no se puede hacer en WPF.
    ¿Como hago para incluir en un panel un control con el mismo tamaña de su contenedor asi este se redimensione?

  6. Omar
    November 6th, 2013 at 21:47 | #6

    Bastante claro. Se entiende, solo falta practicar.

  7. Cynthia Rdz.
    May 30th, 2014 at 09:07 | #7

    Rodrigo, tienes algún ejemplo para un proyecto de tipo Aplicación de Silverlight, en donde el diseño del MainMenu sea adaptable al tamaño del monitor y resolución de los usuarios? es decir, que las imágenes y la distribución de las opciones del menú se ajusten para que sin importar el monitor se vea bien todo??
    Saludos y gracias