Introdução: NavegaçãoGetting started: Navigation

Adicionando navegaçãoAdding navigation

O iOS oferece a classe UINavigationController para auxiliar a navegação no aplicativo: você pode inserir e remover exibições para criar a hierarquia de UIViewControllers que definem o seu aplicativo.iOS provides the UINavigationController class to help with in-app navigation: you can push and pop views to create the hierarchy of UIViewControllers that define your app.

Por outro lado, um aplicativo do Windows 10 com muitas exibições precisa de uma abordagem no estilo de site da web para a navegação.In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. Você pode imaginar os usuários percorrendo as páginas conforme clicam nos controles para trabalhar de sua maneira pelo aplicativo.You can imagine your users hopping from page to page as they click on controls to work their way through the app. Para obter mais informações, consulte Noções básicas de design de navegação.For more info, see Navigation design basics.

Uma das formas de gerenciar essa navegação em um aplicativo do Windows 10 é usar a classe Frame.One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. O guia passo a passo a seguir mostra como você pode tentar fazer isso.The following walkthrough shows you how to try this out.

Continuando com a solução que você começou antes, abra o arquivo MainPage. XAML e adicione um botão na exibição Design.Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. Altere a propriedade Content do botão de "Botão" para "Ir para Página".Change the button's Content property from "Button" to "Go To Page". Então, crie um manipulador para o evento Click do botão, conforme a imagem a seguir.Then, create a handler for the button's Click event, as shown in the following figure. Se você não se lembra de como fazer isso, consulte o passo a passo da seção anterior (Dica: clique duas vezes no botão na exibição Design).If you don't remember how to do this, review the walkthrough in the previous section (Hint: double-click the button in the Design view).

adicionando um botão e seu evento de clique no visual studio

Vamos adicionar uma nova página.Let's add a new page. Na exibição Solução, toque no menu Projeto e em Adicionar novo item.In the Solution view, tap the Project menu, and tap Add New Item. Toque em Página em branco, como mostrado na imagem seguir e, em seguida, em Adicionar.Tap Blank Page as shown in the following figure, and then tap Add.

adicionando uma nova página no visual studio

Em seguida, adicione um botão ao arquivo BlankPage.xaml.Next, add a button to the BlankPage.xaml file. Vamos usar o controle AppBarButton e dar a ele uma imagem de seta voltar: na exibição XAML, adicione <AppBarButton Icon="Back"/> entre os elementos <Grid> </Grid>.Let's use the AppBarButton control, and let's give it a back arrow image: in the XAML view, add <AppBarButton Icon="Back"/> between the <Grid> </Grid> elements.

Agora, vamos adicionar um manipulador de eventos ao botão: clique duas vezes no controle no modo de exibição de design e Microsoft Visual Studio adiciona o texto "AppBarButton _ Click" à caixa de clique , conforme mostrado na figura a seguir, e, em seguida, adiciona e exibe o manipulador de eventos correspondente no arquivo BlankPage.XAML.cs.Now, let's add an event handler to the button: double-click the control in the Design view and Microsoft Visual Studio adds the text "AppBarButton_Click" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage.xaml.cs file.

adicionando um botão voltar e seu evento de clique no visual studio

Se você voltar à exibição XAML do arquivo BlankPage.xaml, o código Extensible Application Markup Language (XAML) do elemento <AppBarButton> deverá aparecer desta forma agora:If you return to the BlankPage.xaml file's XAML view, the <AppBarButton> element's Extensible Application Markup Language (XAML) code should now look like this:

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

Volte ao arquivo BlankPage.xaml.cs e adicione esse código para ir para a página anterior depois que o usuário tocar no botão.Return to the BlankPage.xaml.cs file, and add this code to go to the previous page after the user taps the button.

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.Finally, open the MainPage.xaml.cs file and add this code. Ele abre BlankPage depois que o usuário toca no botão.It opens BlankPage after the user taps the button.

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

Agora, execute o programa.Now, run the program. Toque no botão "Ir para Página" para ir para a outra página e, depois, toque no botão de seta voltar para retornar à página anterior.Tap the "Go To Page" button to go to the other page, and then tap the back-arrow button to return to the previous page.

A navegação de páginas é gerenciada pela classe Frame.Page navigation is managed by the Frame class. Como a classe UINavigationController no IOS usa os métodos pushViewController e popViewController , a classe frame para aplicativos UWP fornece os métodos Navigate e GoBack .As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. A classe Frame também tem um método chamado GoForward, que faz avançar.The Frame class also has a method called GoForward, which does what you might expect.

Esse passo a passo cria uma nova instância de BlankPage cada vez que você navega por ele.This walkthrough creates a new instance of BlankPage each time you navigate to it. (A instância anterior será liberada, automaticamente).(The previous instance will be freed, or released, automatically). Se você não quer que cada vez uma nova instância seja criada, adicione o código a seguir ao construtor da classe BlankPage no arquivo BlankPage.xaml.cs.If you don't want a new instance to be created each time, add the following code to the BlankPage class's constructor in the BlankPage.xaml.cs file. Isso ativará o comportamento NavigationCacheMode.This will enable the NavigationCacheMode behavior.

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

Você também pode ter ou definir a propriedade da classe FrameCacheSize para gerenciar quantas páginas no histórico de navegação podem ser armazenas em cache.You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

Para saber mais sobre navegação, consulte Navegação e XAML personality animations sample.For more info about navigation, see Navigation and XAML personality animations sample.

Observação    Para obter informações sobre navegação para aplicativos UWP usando JavaScript e HTML, consulte início rápido: usando navegação de página única.Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

Próxima etapaNext step

Introdução: AnimaçãoGetting started: Animation