Navegação entre páginas no Windows Phone e passagem de parâmetros

É normal nas aplicações mobile a criação de diversas páginas para realizar tarefas específicas, e é essencial conhecer o processo de navegação entre as páginas que é bem simples, podendo ser feito pelo XAML diretamente ou pelo código.

Vamos criar um exemplo em que na primeira página é feita a navegação através do XAML, e na passagem da segunda página para a terceira será feita a navegação pelo código e com passagem de parâmetro.

Abra o Visual Studio e crie um projeto Windows Phone Application, conforme a figura 1.

Figura 1: Criação do Projeto NavegacaoUm no Visual Studio

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.

Abra o arquivo MainPage.xaml e vá ao content panel para adicionar um stackpanel que conterá o Botão que irá navegar para a página 2, como mostra a listagem 1.

Listagem 1: Criação do StackPanel que irá conter o HyperlinkButton

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Width="400" Height="100" VerticalAlignment="Center">
	<HyperlinkButton Width="120" Height="50" VerticalAlignment="Center"
HorizontalAlignment="Center" Content="Navegar 1" NavigateUri="/Pagina2.xaml" />
</StackPanel>
</Grid>

Renomeie o a pagina no Title Panel para página um, conforme mostra a listagem 2.

Listagem 2: Nomeando o título da página

<!--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="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"/>
	<TextBlock x:Name="PageTitle" Text="página um" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

Agora vá ao Solution Explorer, clique com o botão direito no projeto para adicionar um novo item, que será a segunda página. Nomeie-a Pagina2.xaml e clique em Add, conforme mostra a figura 2.

Figura 2: Criação da página dois no projeto

Abra a página Pagina2.xaml e agora você irá inserir no Content Panel um stack panel que conterá o botão para navegação e o textbox, para que a navegação desta vez seja feita pelo código e ocorra a passagem de parâmetro.

Listagem 3: Criação dos controles na página dois

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
	<StackPanel Width="400" Height="100" Orientation="Horizontal" VerticalAlignment="Top">
		<TextBox Name="txtParametro" Width="200" Height="100"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
		<Button Name="btnNavegar" Content="Navegar 2" Click="btnNavegar_Click" />
	</StackPanel>
</Grid>

E então você deve abrir agora o arquivo Pagina2.xaml.cs para tratar o evento de click do botão navegar dois, conforme a listagem 4.

Listagem 4: Tratamento do evento do botão Navegar

private void btnNavegar_Click(object sender, RoutedEventArgs e)
{
Uri caminho = new Uri("/Pagina3.xaml?parametro=" + txtParametro.Text, UriKind.RelativeOrAbsolute);

NavigationService.Navigate(caminho);
}

Na listagem 4, você instanciou uma Uri para conter o caminho da página no seu projeto e após o ponto de interrogação foi dado um nome para o parâmetro passado, e então concatenado o que foi escrito na caixa de texto txtParametro.

Por fim, na página Pagina2.xaml altere o título da página no TitlePanel para “página 2”.

Agora será criada uma terceira página que receberá o valor do txtParametro. Vá ao Solution Explorer novamente e adicione um novo item Windows Phone Portrait Page, com o nome de Pagina3.xaml.

No topo do arquivo Pagina3.xaml, altere o nome da página no TitlePanel para “página 3”. Vá agora para o arquivo Pagina3.xaml.cs e será tratado o parâmetro passado da página 2, através de um método chamado OnNavigatedTo. Esse método será sobrescrito e então uma MessageBox exibirá o parâmetro passado, conforme a listagem 5.

Listagem 5: Como sobrescrever o método OnNavigatedTo

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);

string parametroRecebido;
if (NavigationContext.QueryString.TryGetValue("parametro", out parametroRecebido))
{
MessageBox.Show("O paramêtro recebido foi : " + parametroRecebido);
}
}

Agora para testar a aplicação, basta pressionar F5.

Figura 3: Aplicação com o parâmetro Michael recebido

É possível obviamente a passagem de mais de um parâmetro para uma próxima página, vamos a um exemplo mostrando como fazer isso.

No mesmo projeto, vá para a página Pagina2.xaml e adicione ao content Panel mais alguns controles como mostra a listagem 6.

Listagem 6: Código dos controles adicionados à página dois

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Width="400" Height="500" VerticalAlignment="Top">
<TextBox Name="txtParametro" Width="200" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>            
<TextBox Name="txtParametro2" Width="200" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBox Name="txtParametro3" Width="200" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Name="btnNavegar" Content="Navegar 2" Click="btnNavegar_Click" />
</StackPanel>
</Grid>

Agora na página três, teremos que manipular os parâmetros recebidos da página dois, portanto abra o arquivo Pagina3.xaml.cs e altere o método OnNavigatedTo, como mostra a listagem 7.

Listagem 7: Método OnNavigatedTo no arquivo MainPage.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);

string parametroRecebido1;
string parametroRecebido2;
string parametroRecebido3;

NavigationContext.QueryString.TryGetValue("parametro", out parametroRecebido1);
NavigationContext.QueryString.TryGetValue("parametro2", out parametroRecebido2);
NavigationContext.QueryString.TryGetValue("parametro3", out parametroRecebido3);

MessageBox.Show("Parâmetro 1: " + parametroRecebido1 + "\nParâmetro 2: " + parametroRecebido2 + "\nParâmetro 3: " + parametroRecebido3);
}

Neste método os três parâmetros estão sendo atribuídos às variáveis acima declaradas, e então exibidas no MessageBox. Pressione F5 e teste sua aplicação.

Um abraço e até o próximo artigo.