Orientaciones de la Pantalla

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

 

Silverlight para Windows Phone 7 soporta en la pantalla la orientación vertical y horizontal. Este tutorial describe cómo trabajar con los cambios de orientación en Windows Phone. 

Este tutorial contiene las siguientes secciones:

  • Orientaciones
  • Técnica de Desplazamiento
  • Técnica de distribución de Grid

Orientaciones

Windows Phone es compatible con las siguientes orientaciones de pantalla:

  • Portrait (Vertical)
  • Landscape left (Horizontal izquierda)
  • Landscape right (Horizontal derecha)

Los usuarios pueden simplemente girar el dispositivo para iniciar un cambio de una orientación a otra. Cuando se está probando tu aplicación en el emulador, puedes cambiar la orientación de la pantalla haciendo clic en los botones de la barra de herramientas del emulador. Los botones de orientación poseen rectángulos con flechas que indican el cambio de orientación.

clip_image002

En la orientación vertical, la página está orientada verticalmente, de modo que la altura de la página sea mayor que su ancho.

En cualquiera de las dos orientaciones horizontales, la barra de estado y la barra de aplicaciones permanecen en el lado de la pantalla donde se encuentra el botón Inicio respectivamente.  El Landscape left tiene la barra de estado a la izquierda y el Landscape right tiene la barra de estado a la derecha. 

Portrait es la orientación por defecto para las aplicaciones y se debe agregar código adicional para soportar los Landscape. No puedes especificar solo la izquierda o solo la  derecha en orientación horizontal.   Si la orientación horizontal es soportada en tu aplicación debes soportar tanto la izquierda como la derecha.  Para especificar que tu aplicación es compatible con Portrait y Landscape debes establecer la propiedad SupportedOrientations a PortraitOrLandscape ya sea en el XAML o en el código.

Hay diferentes maneras de mostrar el contenido, ya sea en orientación vertical u horizontal.  Las dos técnicas son desplazamiento y distribución de Grid.

Técnica de Desplazamiento

La técnica de desplazamiento utiliza un StackPanel que se coloca dentro de un control ScrollViewer. Utiliza esta técnica si deseas mostrar el contenido de una lista, o si tienes diferentes controles que aparecen uno tras otro en la página. El StackPanel te permite ordenar los elementos hijos, uno tras otro en tu aplicación, y el ScrollViewer te permite desplazarte por el StackPanel si los elementos de interfaz de usuario no caben en la pantalla cuando se cambian de vertical a horizontal.  

Para utilizar la técnica de desplazamiento, debes realizar los siguientes pasos. 

  • Cambia la propiedad SupportedOrientations de la página a PortraitOrLandscape. 
  • Cambia el valor predeterminado del Grid en el Content Panel con un ScrollViewer y un StackPanel .

El siguiente ejemplo muestra un StackPanel y varios controles dentro de un ScrollViewer.

XAML

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">

<!– Debes aplicar un background en el StackPanel o no podrás mover el contenido.–>

<StackPanel Background="Transparent" >

<! Agrega diversos controles y elementos de interfaz de usuario.>

<Button Content="This is a Button" />

<Rectangle Width="100" Height="100" Margin="12,0"

     HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>

<Rectangle Width="100" Height="100" HorizontalAlignment="Center"

     Fill="{StaticResource PhoneAccentBrush}"/>

<Rectangle Width="100" Height="100" Margin="12,0"

     HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>

<TextBlock Text=" This is a line of text that will wrap in portrait

orientation but not landscape orientation." TextWrapping="Wrap

 />

<CheckBox Content="A CheckBox"/>

<RadioButton Content="A RadioButton" />

</StackPanel>

</ScrollViewer>

 

clip_image004

clip_image006

Las siguientes imágenes muestran el comportamiento de desplazamiento para la orientación vertical y horizontal. La orientación vertical no requiere del desplazamiento, pero la orientación horizontal sí.

Técnica de Distribución de Grid

Esta técnica de distribución posiciona los elementos de la interfaz de usuario en un Grid. Cuando se produce un cambio de orientación, mediante la programación, debes cambiar la posición de elementos en las diferentes celdas del Grid. Para utilizar la técnica debes realizar los siguientes pasos:

  • Cambia la propiedad SupportedOrientations de la página a PortraitOrLandscape.
  • Usa un Grid para el panel de contenido.
  • Crea un manejador para el evento OrientationChanged y añade el código para volver a colocar los elementos en el Grid.

En el siguiente ejemplo se crea un Grid de 2 x 2  para colocar una imagen y una colección de botones. El evento OrientationChanged reposiciona los elementos dentro del Grid, cuando su orientación es cambiada.

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<!– Crear un Grid de 2 x 2 para almacenar una imagen y un botón de distribución.–>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<!– Añade una imagen al Grid. Asegúrese de que la de la altura y la anchura de la imagen se establezca en 300 y 500, respectivamente, para este ejemplo –>

<Image x:Name="Image1" Grid.Row="0" Grid.Column="0"

Stretch="Fill" HorizontalAlignment="Center" Source="licorice.jpg"

Height="300" Width="500"/>

<- Añade un StackPanel con botones a la fila debajo de la imagen.–> <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0"

HorizontalAlignment="Center" >

<Button Content="Action 1" />

<Button Content="Action 2" />

<Button Content="Action 3" />

<Button Content="Action 4" />

</StackPanel>

</Grid>

C#

 

private void PhoneApplicationPage_OrientationChanged (

   object sender, OrientationChangedEventArgs e)

{

/ / Cambia la ubicación de los botones sobre el cambio de orientación.

if ((e.Orientation y PageOrientation.Portrait) == (PageOrientation.Portrait))

    {

Grid.SetRow (buttonList, 1);

Grid.SetColumn (buttonList, 0);

    }

/ / Si no es así, en el Portrait, mueve el contenido buttonList a la fila y columna visible.

    else

{

Grid.SetRow (buttonList, 0);

Grid.SetColumn (buttonList, 1);

}

} 

 

La siguiente imagen muestra el comportamiento del diseño de un Grid para orientación vertical y horizontal. En la orientación vertical, los botones están situados en la parte inferior. En la orientación horizontal, los botones están situados a la derecha.

clip_image008

clip_image010