Tutorial Windows Phone #4 – Navegação entre Páginas

Padrão

Olá pessoal!

Resgatando a série de tutoriais sobre Windows Phone 7, vamos hoje ver como fazemos para criar um sistema básico de navegação entre duas páginas. Para isso, criaremos um projeto simples que consistirá em um link que fará a navegação entre as páginas. Um link?  Por que não um botão? Porque, segundo as diretrizes da interface Metro, a navegação deverá sempre ocorrer pelo próprio conteúdo. Todo e qualquer item que não contribuir com o conteúdo da aplicação deve ser evitado. Aos poucos vamos nos acostumando com isso! 🙂

Bom, vamos começar criando um novo projeto no Visual Studio 2010 for Windows Phone. Clique no menu File e selecione New Project…. Dentro da categoria Visual C#, selecione Windows Phone Application. Dê o nome de Navegacao (sempre evitando acentuação e caracteres especiais!).

Em seguida, clique com o botão direito sobre o nosso recém criado projeto Navegacao no Solution Explorer e selecione a opção Add -> New Item…. Procure pelo item Windows Phone Portraid Page. Dê o nome de Pagina2.xaml.

Em seguida, clique no botão Add.

Agora, vamos criar o link de navegação nas páginas. No arquivo MainPage.xaml, adicione, adicionaremos um item HyperlinkButton dentro do Grid chamado ContentPanel. Adicione-o da seguinte forma:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <HyperlinkButton x:Name="hbBotao1" Content="Ir para a Página 2"
                     Click="hbBotao1_Click"/>
</Grid>

Adicionamos um HyperlinkButton chamado hbBotao1 com o texto Ir para a Página 2, que, ao ser tocado, chamará o método hbBotao1_Click.

Agora, no arquivo Pagina2.xaml, também adicionaremos um HyperlinkButton dentro do ContentPanel.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <HyperlinkButton x:Name="hbBotao2" Content="Voltar"
                     Click="hbBotao2_Click"/>
</Grid>

Pronto. Na visualização do layout, no lado esquerdo da tela, já será possível visualizar o hyperlink. Para melhorar a experiência, modifique o título das páginas para principalpágina 2 para as duas páginas. Basta selecioná-lo e modificar o valor Text no quadro Properties.

Agora, resta implementarmos os métodos para realizar a navegação. Abra o arquivo MainPage.xaml.cs (se ele não estiver visível no Solution Explorer, basta clicar na setinha para expandir o arquivo Mainpage.xaml). Iremos adicionar a classe MainPage o método que definimos no XML. Assim, depois do método PhoneApplicationPage_Loaded(), adicione o seguinte método:

private void hbButton1_Click(object sender, RoutedEventArgs e)
{
    this.NavigationService.Navigate(new Uri("/Pagina2.xaml", UriKind.Relative));
}

Definimos nesse método que, através no NavigationService, navegaremos até a Pagina2.xaml, através de uma URL relativa, ou seja, o caminho descrito no primeiro parâmetro do objeto Uri, é relativo a nossa própria página.

Agora, no arquivo Pagina2.xaml.cs, adicione o seguinte método à classe Pagina2:

private void hbBotao2_Click(object sender, RoutedEventArgs e)
{
    if (this.NavigationService.CanGoBack)
    {
        this.NavigationService.GoBack();
    }
}

Nesse método, verificamos o conteúdo da flag CanGoBack, que nos diz se é possível voltarmos de página. Caso ela seja verdadeira, fazemos uma chamada ao método GoBack() do NavigationService.

Pronto! Agora é só rodar. Basta clicar na setinha verde na barra de ferramentas ou pressionar F5.

Assim como nos tutoriais Android, você pode baixar o projeto desde exemplo aqui.

Até a próxima!!! 🙂

Um comentário sobre “Tutorial Windows Phone #4 – Navegação entre Páginas

Deixe uma resposta