Há pouco tempo atrás os usuários tinham dificuldade de se adaptar a um smartphone novo e a aplicativos diferentes. Mas agora é essencial você saber que é o aplicativo e o aparelho que deve se adaptar ao usuário, caso ele esteja segurando o aparelho na horizontal ou na vertical, não importa, contanto que ele se sinta confortável, seu aplicativo deve funcionar e se adaptar da mesma maneira.

Adaptação do layout de um aplicativo no Windows Phone

Figura 1: Adaptação do layout de um aplicativo no Windows Phone

Para trabalhar com isso no Windows Phone, você deve lembrar que mesmo com isso sendo oferecido nativamente, seu aplicativo deve estar preparado para essa funcionalidade. Então na página XAML existe a propriedade SupportedOrientation que permite três valores:

  • Landscape: É a definição de utilização na posição horizontal.
  • Portrait: É a definição de utilização na posição vertical.
  • PortraitOrLandscape: É a definição de utilização do aparelho independentemente da posição, ou seja, a página será modificada de acordo com o uso.

Observação: Esta definição pode ser feita através da propriedade no XAML ou então por código.

É necessário avaliar a necessidade da adaptação do aplicativo, podendo usar a técnica Scroll e Auto-Sizing que é a mais fácil de ser implementada, ou então os controles serão reposicionados através do evento OrientationChanged.

Neste primeiro exemplo será criada uma aplicação em que utilizaremos a técnica Auto-Sizing e Scroll, um formulário básico de preenchimento que funcionará tanto na horizontal, quanto na vertical. Para isso, abra o Visual Studio e crie um projeto com o nome de ProjetoOrientation01 conforme a Figura 2.

Criação do projeto do aplicativo de orientation

Figura 2: Criação do projeto do aplicativo de orientation

Ao criar o projeto, é exibida uma caixa com a opção de escolha da versão do Windows Phone, escolha a 7.1, pois assim o seu aplicativo funcionará em todas as versões de Windows Phone disponíveis.

O primeiro passo é criar um ScrollViewer que conterá um Grid e que por sua vez irá conter o StackPanel com os Controles necessários do formulário, que são 4 TextBoxes, 4 TextBlocks e um Button de confirmação, conforme mostra a Listagem 1.

Listagem 1: Criação dos controles do formulário na página MainPage.xaml


<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid Width="450" Height="550">
                <StackPanel Width="450" Height="550">
                    <TextBlock Foreground="White" FontSize="24" Text="Nome completo" />
                    <TextBox Name="txtNome" Width="400" Height="80" />
                    <TextBlock Foreground="White" FontSize="24" Text="Data de nascimento" />
                    <TextBox Name="txtDataNascimento" Width="400" Height="80" />
                    <TextBlock Foreground="White" FontSize="24" Text="Profissão" />
                    <TextBox Name="txtProfissao" Width="400" Height="80" />
                    <TextBlock Foreground="White" FontSize="24" Text="Grau de instrução" />
                    <TextBox Name="txtGrauInstrucao" Width="400" Height="80" />
                    <Button Width="400" Height="80" Content="Confirmar" />
                </StackPanel>
            </Grid>
        </Grid>

Agora defina a propriedade SupportedOrientations para PortraitOrLandscape, sendo essa propriedade definida no PhoneApplicationPage, como mostra a Listagem 2.

Listagem 2: PhoneApplicationPage com a propriedade SupportedOrientations definida


<phone:PhoneApplicationPage 
    x:Class="ProjetoOrientation01.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="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

Lembrando que esta definição pode ser feita de outra maneira também, por código no construtor da página, como mostra a Listagem 3.

Listagem 3: Definição da propriedade SupportedPageOrientation por código


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

Agora, para testar sua aplicação, pressione F5 e altere a posição do aparelho através de dois botões, como mostra a Figura 3.

Alterando a posição do aparelho com a aplicação em funcionamento

Figura 3: Alterando a posição do aparelho com a aplicação em funcionamento

Existe outra maneira também de fazer essa adaptação do aplicativo em relação a posição do aparelho, seria necessário alterar a posição dos controles. Para isso, feche este projeto e crie outro no Visual Studio com o nome de ProjetoOrientation02.

Nesse exemplo, na posição horizontal a página ficaria cortada, mas isso será reparado no evento de modificação da posição do aparelho. Abra o arquivo MainPage.xaml e adicione os controles ao ContentPanel conforme a Listagem 4.

Listagem 4: Criando os controles da página MainPage.xaml


<!--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="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Row="0" Width="300" Height="250" Fill="#FFFFF300" />
                <StackPanel Grid.Row="1" Grid.Column="0" Name="stckBotoes" Width="200" Height="200" Margin="10">
                    <Button Name="btnTeste01" Width="200" Height="100" Content="TESTE01" />
                    <Button Name="btnTeste02" Width="200" Height="100" Content="TESTE02" />
                </StackPanel>
            </Grid>
        </Grid>

Agora adicione ao PhoneApplicationPage o evento de OrientationChanged, conforme a Listagem 5.

Listagem 5: PhoneApplicationPage com o evento de OrietationChanged


<phone:PhoneApplicationPage 
    x:Class="ProjetoOrientation02.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="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" OrientationChanged="PhoneApplicationPage_OrientationChanged_1">

Vá agora para a classe MainPage.xaml.cs e adicione o tratamento ao evento OrientationChanged, Conforme a Listagem 6.

Listagem 6: Tratamento do evento OrientationChanged


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

Os botões são alterados de local conforme a coluna e a linha do grid. No método SetRow, são passados como parâmetros o elemento a ser modificado e a linha deseja.

Pressione F5 e veja a aplicação nos dois formatos, como mostra a Figura 4.

Aplicação em funcionamento nas duas posições

Figura 4: Aplicação em funcionamento nas duas posições

Como vimos, dessa forma podemos redesenhar a página de modo a obter uma organização mais adequada dos controles, sem gerar obrigatoriamente a necessidade de scroll.

Então por aqui finalizamos este artigo. Um abraço e até o próximo.