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

 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

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

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

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.

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.

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

Os dejo el código

Download File – Orientation

Deja un comentario Cancelar respuesta