Introducción: Navegación

Applies to Windows and Windows Phone

Adición de navegación

iOS proporciona la clase UINavigationController para ayudar con la navegación: puedes insertar y mostrar controladores de vista para lograr el efecto que estés buscando.

En Windows 8.1 y Windows Phone 8.1, la navegación debería mezclarse con el contenido de la aplicación. Así se sigue uno de nuestros principios de diseño de aplicaciones de la Tienda Windows, "el contenido antes que el contenedor". Para obtener más información, consulta Modelos de navegación.

Una de las formas de administrar la navegación es con la clase Frame. En el tutorial siguiente se muestra cómo probarlo.

Para seguir con la solución MyApp, abre el archivo MainPage.xaml si aún no se muestra. Selecciona MainPage en MyApp.Windows o MyApp.WindowsPhone, lo que prefieras. Agrega un botón al archivo MainPage.xaml en la vista Diseño. Cambia la propiedad Content del botón de "Button" a "Ir a la página". A continuación, crea un controlador para el evento Click del botón, como se muestra en la siguiente ilustración. Si no recuerdas cómo hacerlo, revisa el tutorial de la sección anterior Introducción: Desplazamiento por Visual Studio (te recomendamos que hagas doble clic en el botón de la vista Diseño).

Adición de un botón y su evento Click en Visual Studio

Vamos a agregar una página nueva y a colocarla en la sección MyApp.Shared para que, de este modo, esté disponible tanto en la versión de Windows como en la de Windows Phone de la aplicación. Resalta MyApp.Shared en la vista Solución y, luego, pulsa el menú Proyecto y Agregar nuevo elemento. Pulsa Página en blanco como se muestra en la ilustración siguiente y después pulsa Agregar.

Adición de una nueva página en Visual Studio

A continuación, agrega un botón al archivo BlankPage.xaml. Vamos a usar el control AppBarButton y le asignaremos una imagen de flecha de retroceso: en la vista XAML, agrega <AppBarButton Icon="Back"/> entre los elementos <Grid> </Grid>.

Ahora, vamos a agregar un controlador de eventos al botón: haz doble clic en el control en la vista Diseño. Microsoft Visual Studio agrega el texto "AppBarButton_Click" al cuadro Click, como se aprecia en la siguiente figura, y, luego, agrega y muestra el controlador de eventos correspondiente en el archivo BlankPage.xaml.cs.

Adición de 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 tener el siguiente aspecto:

<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.


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. Abre BlankPage después de que el usuario pulse el botón.



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

Ahora, ejecuta el programa. 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.

La clase Frame administra la navegación por páginas. De forma similar a la clase UINavigationController de iOS, que tiene los métodos pushViewController y popViewController, la clase Frame para aplicaciones de la Tienda Windows tiene los métodos Navigate y GoBack. La clase Frame también tiene un método denominado GoForward, que hace lo que podrías esperar.

En este tutorial se crea una nueva instancia de BlankPage cada vez que el usuario navega hacia ella. (El recolector de elementos no usados liberará automáticamente la instancia anterior). 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. Así se habilitará el comportamiento NavigationCacheMode.


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 que se pueden almacenar en caché en el historial de navegación.

Para obtener más información sobre la navegación, consulta Inicio rápido: navegar entre páginas y la muestra de animaciones de personalidad de XAML.

Nota  Para obtener información sobre la navegación para aplicaciones de la Tienda Windows con JavaScript y HTML, consulta Inicio rápido: usar la navegación de una página.

Paso siguiente

Introducción: Animación

 

 

Mostrar:
© 2014 Microsoft