Windows Phone–Tutorial II–Orientación

En esta segunda entrada vamos a ver como la posibilidad que nos da de rotar el teléfono influye en el diseño de nuestras aplicaciones. Cuando creamos una aplicación para Windows Phone todas las paginas que creamos podemos controlar desde Xaml si esa pagina puede rotar o no a partir de las propiedades SupportedOrientations y Orientation.

  • SupportedOrientations: define el tipo de orientaciones que la pagina soporta y puede coger los valores de la enumeración SupportedPageOrientation que son: Portrait, Landscape y PortraitOrLandscape.
  • Orientation: contiene la orientación que tiene actualmente la pagina

Para ver como funciona vamos a crear una aplicación sencillita que contiene una imagen., el Xaml seria tan sencillo como

Captura1_thumb1

1 <Grid x:Name="LayoutRoot" Background="Transparent"> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="Auto"/> 4 <RowDefinition Height="*"/> 5 </Grid.RowDefinitions> 6 7 <!--TitlePanel contains the name of the application and page title--> 8 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 9 <TextBlock x:Name="ApplicationTitle" Text="Orientación" Style="{StaticResource PhoneTextNormalStyle}"/> 10 <TextBlock x:Name="PageTitle" Text="Portrait" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 11 </StackPanel> 12 13 <!--ContentPanel - place additional content here--> 14 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 15 <Image x:Name="imgPenguins" Source="ImagePenguins.jpg" Stretch="Uniform" ></Image> 16 </Grid> 17 </Grid>

Si ejecutamos la aplicación veremos en el emulador

 

Captura2_thumb1

 

Y ahora como giro el emulador, la pantalla del portátil no puedo girar. El emulador nos ofrece una barra de herramientas (recuadro en rojo) , donde los botones

Captura3_thumb

nos permiten girar el emulador, si los pulsamos veremos como nos queda la aplicación

 

Captura4_thumb

Si nos fijamos la imagen no ocupa toda la pantalla y deberíamos ser capaces de ofrecer una aplicación que se adapte a todos los movimientos del usuario, para detectar los cambios de orientación que realiza el usuario, esto lo podemos ver mejor si en vez de la imagen ponemos un StackPanel con botones.

1 <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 2 <Button x:Name="btnOne" Content="One"></Button> 3 <Button x:Name="btnTwo" Content="Two"></Button> 4 <Button x:Name="btnThree" Content="Three"></Button> 5 <Button x:Name="btnFour" Content="Four"></Button> 6 <Button x:Name="btnFive" Content="Five"></Button> 7 <Button x:Name="btnSix" Content="Six"></Button> 8 <Button x:Name="btnSeven" Content="Seven"></Button> 9 </StackPanel>

Si lo ejecutamos.

 

Captura5_thumb1Captura6_thumb1

Vemos que cuando giramos perdemos botones con lo que nos damos cuenta que tenemos que introducir un Scroll para que el usuario pueda acceder a todos los botones.

1 <ScrollViewer Grid.Row="1" Margin="12,0,12,83"> 2 <StackPanel x:Name="ContentPanel" > 3 <Button x:Name="btnOne" Content="One"></Button> 4 <Button x:Name="btnTwo" Content="Two"></Button> 5 <Button x:Name="btnThree" Content="Three"></Button> 6 <Button x:Name="btnFour" Content="Four"></Button> 7 <Button x:Name="btnFive" Content="Five"></Button> 8 <Button x:Name="btnSix" Content="Six"></Button> 9 <Button x:Name="btnSeven" Content="Seven"></Button> 10 </StackPanel> 11 </ScrollViewer>

Si ejecutamos y giramos veremos que tampoco nos vale ya que el Scrollviewer no aparecerá debido a que el tamaño del scrollviewer no cambia a la hora de girar.

 

Captura7_thumb1

 

Por lo que debemos de detectar cuando el usuario rotar el teléfono y cambiar el tamaño del Scrollviewer adaptándolo a la posición que tenga el teléfono. Para detectar los giros del teléfono utilizaremos el evento OrientationChanged

1 public MainPage() 2 { 3 InitializeComponent(); 4 OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged); 5 } 6 7 void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e) 8 { 9 if (e.Orientation.Equals(PageOrientation.LandscapeLeft) || 10 e.Orientation.Equals(PageOrientation.LandscapeRight)) 11 { 12 PageTitle.Text = "Landscape"; 13 scContent.Height = 300; 14 } 15 else 16 { 17 PageTitle.Text = "Portrait"; 18 scContent.Height = 500; 19 } 20 }

Ahora aparecerá un Scroll pero este funciona como en el iPhone solo aparece cuando se arrastra el ratón mientras esta pulsado el botón izquierdo, así que no 
esperéis verlo al girar el emulador, tenéis que forzar su visualización
Captura8_thumb1

Os dejo el código

Download File – Orientation

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *