Introducción: NavegaciónGetting started: Navigation

Agregar navegaciónAdding navigation

iOS ofrece la clase UINavigationController para ayudar con la navegación en la aplicación: puedes insertar y extraer vistas para crear la jerarquía de elementos UIViewController que definen la aplicación.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 el contrario, una aplicación de Windows 10 que contiene varias vistas requiere más que un enfoque de sitio web para la navegación.In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. Puedes esperar que los usuarios pasen de una página a otra conforme hacen clic en controles para abrirse camino por la aplicación.You can imagine your users hopping from page to page as they click on controls to work their way through the app. Para obtener información, consulta Conceptos básicos de diseño de la navegación.For more info, see Navigation design basics.

Una de las formas de administrar esta navegación en una aplicación de Windows 10 es usar la clase Frame.One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. En el tutorial siguiente se muestra cómo puedes probarlo.The following walkthrough shows you how to try this out.

Para seguir con la solución que iniciaste anteriormente, abre el archivo MainPage.xaml y agrega un botón en la vista Diseño.Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. Cambia la propiedad Content del botón de "Botón" a "Ir a la página".Change the button's Content property from "Button" to "Go To Page". A continuación, crea un controlador para el evento Click del botón, como se muestra en la siguiente ilustración.Then, create a handler for the button's Click event, as shown in the following figure. Si no recuerdas cómo hacerlo, revisa el tutorial de la sección anterior (sugerencia: haz doble clic en el botón de la vista Diseño).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).

agregar un botón y su evento click en visual studio

Vamos a agregar una página nueva.Let's add a new page. En la vista Solución, pulsa el menú Proyecto y Agregar nuevo elemento.In the Solution view, tap the Project menu, and tap Add New Item. Pulsa Página en blanco como se muestra en la ilustración siguiente y después pulsa Agregar.Tap Blank Page as shown in the following figure, and then tap Add.

agregar una nueva página a visual studio

A continuación, agrega un botón al archivo BlankPage.xaml.Next, add a button to the BlankPage.xaml file. Se usará el control AppBarButton y le asignaremos una imagen de flecha atrás: en la vista XAML, agrega <AppBarButton Icon="Back"/> entre los 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.

Ahora, vamos a agregar un controlador de eventos al botón: haga doble clic en el control en la vista de diseño y Microsoft Visual Studio agrega el texto "AppBarButton _ click" al cuadro de clic , como se muestra en la ilustración siguiente y, a continuación, agrega y muestra el controlador de eventos correspondiente en el archivo 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.

agregar un botón atrás y su evento click en visual studio

Si vuelves a la vista XAML del archivo BlankPage.xaml, el código de lenguaje XAML del elemento <AppBarButton> debería parecerse a lo siguiente: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"/>

Vuelve al archivo BlankPage.xaml.cs y agrega este código para ir a la página anterior después de que el usuario pulse el botón.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 último, abre el archivo MainPage.xaml.cs y agrega este código.Finally, open the MainPage.xaml.cs file and add this code. Abre BlankPage después de que el usuario pulse el botón.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));
}

Ahora, ejecuta el programa.Now, run the program. Pulsa el botón "Ir a la página" para ir a la otra página y después pulsa el botón de flecha atrás para volver a la 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.

La clase Frame administra la navegación de páginas.Page navigation is managed by the Frame class. Como la clase UINavigationController de iOS usa los métodos pushViewController y popViewController , la clase Frame para aplicaciones UWP proporciona métodos Navigate y GoBack .As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. La clase Frame también tiene un método denominado GoForward, que hace lo que su nombre en inglés (ir adelante) sugiere.The Frame class also has a method called GoForward, which does what you might expect.

En este tutorial se crea una nueva instancia de BlankPage cada vez que el usuario navega a ella.This walkthrough creates a new instance of BlankPage each time you navigate to it. (Se liberará la instancia anterior automáticamente).(The previous instance will be freed, or released, automatically). Si no quieres que se cree una nueva instancia cada vez, agrega este código al constructor de la clase de BlankPage en el archivo 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. Así se habilitará el comportamiento 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;
}

También puedes obtener o establecer la propiedad CacheSize de la clase Frame para administrar el número de páginas del historial de navegación que se pueden almacenar en caché.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 más información sobre la navegación, consulta Navegación y Ejemplo de animaciones de personalidad XAML.For more info about navigation, see Navigation and XAML personality animations sample.

Nota:    Para obtener información sobre la navegación en aplicaciones para UWP con JavaScript y HTML, consulte Inicio rápido: usar la navegación de una página.Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

Paso siguienteNext step

Introducción: AnimaciónGetting started: Animation