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

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo como configurar a página para aceitar as orientações vertical e horizontal, utilizando apenas o código XAML. 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”

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

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

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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?