Introdução: navegação

Applies to Windows and Windows Phone

Adicionando navegação

O iOS fornece a classe UINavigationController para ajudar na navegação: você pode fazer forçar e estourar os controladores de visualização para obter o efeito desejado.

No Windows 8.1 e Windows Phone 8.1, a navegação deve se mesclar com o conteúdo do aplicativo. Isso é derivado de um dos princípios do design de aplicativos da Windows Store, "conteúdo antes da cromagem". Para saber mais, veja padrões de navegação.

Uma das maneiras de gerenciar a navegação é com a classe Frame. O seguinte guia passo a passo mostra como você pode tentar fazer isso.

Continuando com a solução MyApp, abra o arquivo MainPage.xaml se ele ainda não estiver visível. Selecione MainPage em MyApp.Windows ou MyApp.WindowsPhone — conforme sua preferência. Adicione um botão ao arquivo MainPage.xaml no modo de exibição de Design. Mude a propriedade Content do botão de "Button" para "Go To Page". Crie um manipulador para o evento Click do botão, conforme mostrado na figura a seguir. Se você não se lembra de como fazer isso, leia o passo a passo na seção anterior Introdução: Conhecendo o Visual Studio (Dica: clique duas vezes no botão do modo Design).

Adicionando um botão e seu evento Click no Visual Studio

Vamos adicionar uma nova página e colocá-la na ramificação MyApp.Shared para que ela fique visível em ambas as versões Windows e Windows Phone do aplicativo. Destaque MyApp.Shared na exibição Solução, e então toque no menu Projeto e toque em Adicionar Novo Item. Toque em Página em Branco, conforme mostrado na figura a seguir, e toque em Adicionar.

Adicionando uma nova página no Visual Studio

Em seguida, adicione um botão ao arquivo BlankPage.xaml. Vamos usar o controle AppBarButton e fornecer a ele uma imagem de seta de voltar: na exibição XAML, adicione <AppBarButton Icon="Back"/> entre os elementos <Grid> </Grid>.

Agora, vamos adicionar um manipulador de eventos ao botão: clique duas vezes no controle na exibição Design e o Microsoft Visual Studio adiciona o texto "AppBarButton_Click" à caixa Clicar, conforme mostrado na figura a seguir, e então adiciona e exibe o manipulador de eventos correspondente no arquivo BlankPage.xaml.cs.

Adicionando um botão de voltar e seu evento Click no Visual Studio

Se você voltar para o modo de exibição XAML do arquivo BlankPage.xaml, o código Linguagem de Marcação de Aplicativo Extensível (XAML) do elemento <AppBarButton> agora deverá ter esta aparência:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

Volte ao arquivo BlankPage.xaml.cs e adicione este código para ir à página anterior depois que o usuário tocar no botão.


private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

Por fim, abra o arquivo MainPage.xaml.cs e adicione este código. Ele abrirá BlankPage depois de o usuário tocar no botão.



private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

Agora execute o programa. Toque no botão "Go To Page" para ir à outra página e toque no botão de seta de voltar para voltar à página anterior.

A navegação de página é gerenciada pela classe Frame. De maneira semelhante à classe UINavigationController no iOS, que possui métodos pushViewController e popViewController, a classe Frame para aplicativos da Windows Store tem métodos Navigate e GoBack. A classe Frame também tem um método denominado GoForward, que realiza o que você pode estar esperando.

Este tutorial cria uma nova instância de BlankPage sempre que você navega por ele. (A instância anterior será liberada, automaticamente pelo coletor de lixo). Se você não quiser que uma nova instância sempre seja criada, adicione o código a seguir ao construtor da classe BlankPage no arquivo BlankPage.xaml.cs. Isso habilitará o comportamento de NavigationCacheMode.


public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

Você também pode obter ou definir a propriedade CacheSize da classe Frame para gerenciar quantas páginas no histórico de navegação podem ser armazenadas em cache.

Para saber mais sobre navegação, veja Guia de início rápido: navegando entre páginas e Exemplo de animações de personalidade XAML.

Observação  Para saber mais sobre navegação para aplicativos da Windows Store que usam JavaScript e HTML, veja Guia de início rápido: usando a navegação de página única.

Próxima etapa

Introdução: Animação

 

 

Mostrar:
© 2014 Microsoft