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
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
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.
