Windows Phone 7 – Tratando a orientação da página no XAML

O crescimento do uso de dispositivos móveis como ferramentas de produtividade e entretenimento fez com que os smartphones se tornassem mais rápidos, com processadores mais poderosos, fazendo com que fosse possível agregar novos recursos e funcionalidades para melhorar a interação com o usuário, o que não era possível há alguns anos atrás, devido ao pouco uso e falta de recursos disponíveis. Pensando nesse sentido, os desenvolvedores de aplicações móveis devem ficar atentos para aproveitar ao máximo os recursos disponibilizados pelo aparelho e pelo seu sistema operacional. O uso do recurso de orientação vai permitir a aplicação esteja disponível na posição vertical, horizontal ou vertical e horizontal, esta última é a melhor, pois possibilita que o usuário escolha a posição mais confortável para interagir com a aplicação.

O Windows Phone traz este recurso nativamente e é chamado de “orientation”, permitindo que possamos disponibilizar esta funcionalidade para o usuário tornando nossa aplicação mais amigável. Mesmo trazendo este recurso nativamente é necessário que construamos a nossa aplicação com as páginas devidamente preparadas para utilizar “orientation” . Por padrão, a opção de orientação vem como vertical “retrato”.

Para habilitar o suporte à orientation vamos alterar uma a propriedade da página chamada SupportedOrientation que tem as opções Portrait (somente vertical - padrão), Landscape (somente horizontal) e PortraitOrLanscape (vertical ou horizontal) e faz com que a posição da página seja alterada de acordo com a rotação do aparelho, esta é a opção que vamos usar. Para fazer com que as páginas suportem esta funcionalidade, devemos definir os mecanismos apropriados de Scroll na forma mais simples no xaml ou o evento OrientationChanged do Grid na forma programada, conforme a necessidade da aplicação, fazendo o reposicionamento dos objetos na página. Podemos fazer a definição dessa propriedade de duas formas, diretamente no arquivo XAML ou através de programação, neste artigo iremos focar a alteração via XAML.

Vamos então criar uma aplicação Windows Phone Aplication com o nome Orientacao, utilizando a versão 7.1 do SDK. Mudaremos o título da nossa aplicação para “Artigo DevMedia” e o título da página para “Orientção”, adicionaremos alguns objetos apenas para demonstração do uso de Orientação que são dois “TextBox”, dois “TextBlock” e dois “Button”. Para facilitar a inclusão dos objetos vamos acessar a “MainPage.xaml” e substituir a tag Grid abaixo do título <!--LayoutRoot is the root grid where all page content is placed--> por este código que está logo abaixo (Listagem 1.).

Listagem 1: Código para inclusão dos objetos na página

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Artigo DevMedia" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Orientação" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <TextBlock Height="30" Name="textBlock1" Text="Nome"  Margin="14,10,0,0"/>
                <TextBox Height="72" Name="textBox1" Text="" Margin="0,10,0,0" />
                <TextBlock Height="30" Name="textBlock2" Text="Endereço"  Margin="14,10,0,0" />
                <TextBox Height="72" Name="textBox2" Text="" Margin="0,10,0,0" />
                <Button Content="Salvar" Height="72" Name="button1" Width="160"  Margin="0,20,0,0"/>
                <Button Content="Limpar" Height="72" Name="button2" Width="160" Margin="0,20,0,0"/>
            </StackPanel>
        </Grid>
    </Grid>

Com essa substituição, 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, e a sensação que temos é que a aplicação está incompleta e esta é a mesma sensação que o usuário da nossa aplicação terá quando rotacionar o aparelho. Vamos mudar esse cenário para que a aplicação fique mais amigável, então primeiramente mudaremos a propriedade da página “SupportedOrientations”, que pode ser encontrada na penúltima linha do MainPage.xaml antes da tag onde começa a Listagem 1, para "PortraitOrLandscape" que significa que a página vai trabalhar na posição vertical (portrait) ou horizontal (landscape). A outra propriedade “Orientation” que fica logo à frente da propriedade “SupportedOrientations” indica qual será o padrão de orientação da aplicação, no nosso caso vertical (portrait), então as nossas propriedades de página ficarão assim: “SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"”.

Executando nossa aplicação vamos verificar que os objetos antes estáticos irão rotacionar de acordo com a direção que o simulador for rotacionado, mas mesmo assim o ultimo botão ficou inacessível, não conseguimos fazer a rolagem da tela para acessar o botão, então temos que acrescentar o “Scrolling”. Então para fazer isso basta acrescentar a tag ScrollViewer antes da tag <StackPanel Background="Transparent"> conforme o código abaixo ( Listagem 2.).

Listagem 2: Código contendo a tag ScrollViewer

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ScrollViewer>
        <StackPanel Background="Transparent" >
            <TextBlock Height="30" Name="textBlock1" Text="Nome"  Margin="14,10,0,0"/>
            <TextBox Height="72" Name="textBox1" Text="" Margin="0,10,0,0" />
            <TextBlock Height="30" Name="textBlock2" Text="Endereço"  Margin="14,10,0,0" />
            <TextBox Height="72" Name="textBox2" Text=""  Margin="0,10,0,0" />
            <Button Content="Salvar" Height="72" Name="button1" Width="160"  Margin="0,20,0,0"/>
            <Button Content="Limpar" Height="72" Name="button2" Width="160" Margin="0,20,0,0"/>
        </StackPanel>
    </ScrollViewer>
</Grid>
 

A tag ScrollViewer faz o scroll do “StackPanel”, que por sua vez faz o autosize por padrão quando omitimos a propriedade “Width”.

Executando nossa aplicação poderemos ver que já é possível fazer a rolagem da tela para acessar os botões necessários.

Como vimos, é um processo bastante simples e que garante uma funcionalidade hoje fundamental à aplicações móveis.

Um abraço a todos e até a próxima.