Tutorial Windows Phone #5 – Transferindo Dados entre Páginas

Padrão

Olá pessoal!

No último tutorial sobre Windows Phone, criamos um sistema simples de navegação entre duas páginas. Hoje, veremos como passar dados entre as páginas. Para início de conversa, crie um novo projeto chamado NavegacaoComParametros (ou um outro nome qualquer que você queira). Após criar, adicione uma nova página, chamada Pagina2.xaml, da mesma forma como foi feito no último tutorial.

Nosso aplicativo será constituído de três Hyperlinks, que direcionarão para a segunda página, onde será exibida qual opção foi selecionada.

Bom, primeiramente vamos adicionar os Hyperlinks a nossa página principal. Percebam que adicionamos um item de layout, o StackPanel que se encarrega de, como o próprio nome diz, “empilhar” os itens adicionados dentro dele. Adicione o seguinte trecho ao ContentPanel do MainPage.xaml.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Orientation="Vertical">
        <HyperlinkButton Content="Opção 1" Click="HyperlinkButton_Click"
                         TabIndex="1" />
        <HyperlinkButton Content="Opção 2" Click="HyperlinkButton_Click"
                         TabIndex="2" />
        <HyperlinkButton Content="Opção 3" Click="HyperlinkButton_Click"
                         TabIndex="3" />
    </StackPanel>
</Grid>

Utilizamos o parâmetro Orientation com o valor Vertical no StackPanel para que os elementos inseridos sejam empilhados verticalmente. Além disso, definimos em todos os itens HyperlinkButton a chamada ao método HyperlinkButton_Click, definindo também o parâmetro TabIndex para sabermos qual dos links ocasionou na chamada do método.

Seguindo, vamos implementar o método HyperlinkButton_Click() na classe MainPage.

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    HyperlinkButton hb = sender as HyperlinkButton;
    string url = string.Format("/Pagina2.xaml?ID={0}", hb.TabIndex);
    this.NavigationService.Navigate(new Uri(url, UriKind.Relative));
}

Entendendo o que foi feito, na linha 26 é feito um cast do primeiro parâmetro, sender, transformando-o num objeto do tipo HyperlinkButton. Em seguida, montamos em uma string a URI que será chamada. Perceba que a sua construção lembra bastante uma chamada post do HTTP. Passamos na string o valor selecionado, sob o nome de ID. Em, seguida, realizamos a chamada da mesma forma como foi feita no post anterior, através no Navigate().

Agora, vamos até o arquivo Pagina2.xaml para adicionarmos um elemento TextBlock. Nele será exibida a mensagem informando qual item foi selecionado na página anterior. Adicione o item ao ContentPanel conforme o trecho a seguir:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock x:Name="lbTexto" Style="{StaticResource PhoneTextTitle3Style}" />
</Grid>

O estilo definido para o TextBlockPhoneTextTitle3Style é parte dos recursos de tema do próprio Windows Phone. Portanto, não se preocupe com ele por enquanto. Nomeamos o nosso TextBlock como lbTexto.

Agora, na classe Pagina2() (arquivo Pagina2.xaml.cs), vamos implementar o método PhoneApplicationPage_Loaded(). Esse método será chamado quando o carregamento da página for concluído.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    lbTexto.Text = string.Format("Você selecionou a opção número {0}",
        this.NavigationContext.QueryString["ID"]);
}

Nesse método, atribuímos ao atributo Text do nosso TextBlock a string Você selecionou a opção número X, pegando o valor ID do nosso NavigationContext, que foi atribuído na página anterior.

Para finalizar, precisamos fazer com que o nosso método PhoneApplicationPage_Loaded() seja de fato chamado ao concluir-se o carregamento da página. Dentro do atributo phone:PhoneApplicationPage do arquivo Pagina2.xaml, vamos adicionar o atributo Loaded, atribuindo como valor o nosso método.

<phone:PhoneApplicationPage
    x:Class="NavegacaoComParametros.Pagina2"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

E é isso. Caso deseje, você pode alterar o título das páginas, como fizemos no outro tutorial.

Para baixar este projeto, basta clicar aqui.

Deixe uma resposta