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.
