Windows Phone 7 – Controlando a orientação da página via programação

Neste artigo sobre Orientation, vamos fazer com que a nossa aplicação utilize a funcionalidade de orientação de forma programada, desta forma devemos reposicionar os objetos da página da aplicação conforme a posição que o usuário escolher.

Vamos então fazer algumas alterações na página principal da nossa aplicação. Vamos acrescentar uma tag grid com suas definições dentro do grid principal, conforme definido na Listagem 1, e substituiremos a tag <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> que fica logo abaixo de pelo seu conteúdo e por último vamos alterar voltar a propriedade “SupportedOrientetion” para o valor padrão que é “Portrait” SupportedOrientations="Portrait" Orientation="Portrait".

Listagem 1: Código para substituição da tag Grid

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="445"/>
            <ColumnDefinition Width="103*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,10,0,0" Name="textBlock1" Text="Nome" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="10,50,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="435" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,132,0,0" Name="textBlock2" Text="Endereço" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="10,172,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="435" />
        <StackPanel x:Name="stkBotoes" Grid.Row="1" Width="194">
            <Button Content="Salvar" Height="86" Name="button1"  Width="160" Margin="5,50,0,0"/>
            <Button Content="Limpar" Height="86" Name="button2" Width="160" Margin="5,20,0,0"/>
        </StackPanel>
    </Grid>
</Grid>

Com essa substituição a nossa página deve ficar como a figura abaixo (Figura 1).

Figura 1: Layout da aplicação após a substituição do código em MainPage.xaml

Se executarmos a nossa aplicação e mudarmos a posição do nosso simulador para a posição horizontal (paisagem), nada vai acontecer, então devemos implementar o código necessário.

Em mainPage.xaml, clique com o botão direito do mouse e no menu escolha a opção ViewCode ou pressione a tecla F7, será mostrado o o código da nossa aplicação. No construtor da classe o que está abaixo de ”InitializeComponent();“ vamos inserir uma linha de código que vai configurar a nossa página para o modo vertical (portrait) ou horizontal (landscape) conforme (Listagem 2).

Listagem 2: Alterando a configuração da página

public MainPage()
{
    InitializeComponent();
    this.SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;
}

Executando a nossa aplicação e rotacionando a página pelo emulador, veremos a página rotacionada mas sem acesso ao botão limpar (Figura 2), isso porque ainda não fizemos o tratamento da página.

Figura 2: Tela rotacionada sem tratamento

Para fazer o tratamento, devemos usar o evento de página chamado OrientationChanged, que é disparado sempre que o usuário faz um movimento no dispositivo. Vamos acessar o mainPage.xaml e na última linha da tag >phone:PhoneApplicationPage< vamos acrescentar o evento OrientationChanged (Listagem 3).

Listagem 3: Acrescentado o evento OrientationChanged

<phone:PhoneApplicationPage 
    x:Class="Orientacao.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" OrientationChanged="PhoneApplicationPage_OrientationChanged">
 

Porém acrescentar este evento não basta, temos que fazer o tratamento necessário no código, então vamos acessar o código pressionando F7 em mainPage.xaml; perceberemos que foi criado um método (PhoneApplicationPage_OrientationChanged) automaticamente, o qual usaremos para fazer as implementações para tratarmos o evento OrientatioChanged. Então dentro deste método devemos verificar em qual posição o aparelho se encontra, para que possamos fazer o tratamento de acordo com a posição vertical ou horizontal alterando os métodos SetRow e SetColumns da classe Grid . Faremos isso verificando o retorno do parâmetro “e” passado pelo evento, conforme o código abaixo (Listagem 4).

Listagem 4: Código do método que fará a alteração dos objetos

       private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
       {
           if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
           {
               Grid.SetColumn(stkBotoes, 0);
               Grid.SetRow(stkBotoes, 1);
           }
           else
           {
               Grid.SetColumn(stkBotoes, 1);
               Grid.SetRow(stkBotoes, 0);
           }

       }

Agora, ao executarmos a nossa aplicação, veremos que os botões ficaram alinhados à direita, eliminando a necessidade de usar scrolling. Isso é muito interessante, porque nos da flexibilidade de usar ou não o scroll de acordo com a nossa aplicação.

Até o próximo post.