[Universal Apps] Navegación entre páginas, paso de parámetros y gestión de la tecla volver (1/2)

Introducción

Casi cualquier aplicación que realices tendrá más de una página. Por lo que es vital saber como navegar entre ellas.

En este artículo, vamos a aprender como se realiza la navegación entre páginas en Windows Phone 8.1 además de aprender como gestionar la tecla física atrás, gestionar el historial de navegación,etc.

¿Te apuntas?

Navegación entre páginas

Antes de entrar de lleno a la navegación entre páginas en si. Vamos a analizar una serie de conceptos básicos para entender todo el funcionamiento del sistema de navegación.

Ahora, en Windows Phone 8.1, la App cuenta con una Window que contiene un único Frame que ocupa el 100% del área de la pantalla.

El Frame, se crea en el arranque de la aplicación y es el encargado de contener y gestionar cada una de las páginas (Page). Creamos una nueva aplicación desde cero, para ver donde se crea el Frame y como gestionamos la navegación.

Elegimos la plantilla de aplicación en blanco, la más básica, para centrarnos en la navegación entre páginas.

Si nos dirigimos a la clase App.xaml.cs, en el método OnLaunched, lanzado al arrancar la App, podemos ver la creación del Frame:

NOTA: El Frame también mantiene un historial de navegación de las páginas que han sido visitadas.

Añadimos un botón en la página principal de nuestra aplicación:

<Button Content="Navegar a página 2" HorizontalAlignment="Center" />

Antes de continuar, añadiremos una segunda página a la que navegaremos tras pulsar el botón. Seleccionamos el Proyecto, hacemos clic derecho y seleccionamos la opción Agregar. A continuación, seleccionamos la opción Nuevo elemento. Tras hacer clic en la opción nuevo elemento se nos abrirá el cuadro de diálogo Agregar nuevo elemento:

Añadimos una nueva página (en nuestro ejemplo llamada “Pagina2″) al proyecto. Ahora ya podemos continuar con la navegación de la página principal a la que acabamos de añadir.

Utilizamos el evento clic del botón:

<Button Content="Navegar a página 2" HorizontalAlignment="Center" Click="Button_Click"/>

Y en el code-behind:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
 
}

Y en el clic del botón:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
     Frame.Navigate(typeof(Pagina2));
}

Analicemos el código. Contamos con un modelo de navegación integrado que usa controles Frame y Page y funciona de manera similar a un navegador web. El control Frame hospeda controles Page y tiene un historial de navegación que se puede utilizar para ir hacia atrás y hacia adelante por las páginas que ya visitaste. Tras obtener el Frame correspondiente, utilizamos el método Navigate para realizar la navegación a otra página. Tenemos dos sobrescrituras del método Navigate:

  • Navigate(TypeName). Provoca que el Frame cargue el contenido especificado por el tipo pasado como parámetro.
  • Navigate(TypeName, Object). En este caso, además de indicar el tipo del contenido a cargar (primer parámetro), podemos pasar un parámetro a la página que se navega(segundo parámetro).

En nuestro ejemplo hemos utilizado la primera sobrescritura del método sin pasar parámetro.

Volver atrás

Ahora, una vez en la segunda página, podemos programáticamente volver a la página anterior. Añadimos un botón en la segunda página:

<Button Content="Volver" HorizontalAlignment="Center" Click="Button_Click"/>

Este botón nos permitirá volver a la página anterior. Añadimos el manejador del evento en el code-behind:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
 
}

En el clic del botón:

private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
     if (Frame.CanGoBack)
          Frame.GoBack();
}

Como hicimos previamente, vamos a analizar el sencillo código anterior. Utilizamos primero la propiedad CanGoBack que nos devuelve un bool indicando si hay páginas en el historial de navegación o no. Si existe historial de navegación utilizamos el método GoBack que navega al elemento más inmediato del historial de navegación.

NOTA: También contamos con la propiedad CanGoForward. Indica si en el historial de navegación existe una página delante de la actual.

Pasar parámetros

Ya hemos visto como navegar hacia delante y hacia atrás. Sin embargo, en ocasiones, necesitamos pasar información entre las páginas. Ya hemos visto que el método Navigate cuenta con una sobrescritura que nos permite pasar parámetros.

Navigate(TypeName, Object). En este caso, además de indicar el tipo del contenido a cargar (primer parámetro), podemos pasar un parámetro a la página que se navega(segundo parámetro).

En nuestro ejemplo modificamos la navegación de la página principal a la secundaria:

Frame.Navigate(typeof(Pagina2), "Podemos enviar un parámetro");

De manera similar a como ya hemos visto en Windows Phone, al navegar hacia o desde una página se ejecutan los métodos:

Para recuperar el String pasado como parámetro vamos a utilizar el método OnNavigatedTo que se ejecutará al entrar en la segunda página:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
     base.OnNavigatedTo(e);
      
     if (e.Parameter != null)
          Debug.WriteLine(e.Parameter);
}

En nuestro ejemplo, hemos recuperado el String y lo sacamos por la consola de depuración.

Sencillo, ¿cierto?.

Gestión de la tecla física atrás

En nuestra aplicación, estando en la segunda página podemos utilizar también la tecla física como hacíamos en Windows Phone 8 para volver atrás. Si la pulsamos… Ops!, ¿que ha ocurrido?

No hemos vuelto a la página anterior. En aplicaciones Windows XAML, al pulsar la tecla física atrás provoca una navegación a la App anterior no a la página anterior.

Podemos incluir código personalizado para anular este comportamiento y causaruna navegación atrás dentro de la propia aplicación.

NOTA: En aplicaciones Silverlight 8.1 la navegación atrás es dentro de la propia aplicación.


En el archivo App.xaml.cs, en el constructor de nuestra aplicación añadimos:

HardwareButtons.BackPressed += HardwareButtons_BackPressed;

El evento será:

void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
{
     Frame frame = Window.Current.Content as Frame;
 
     if (frame == null)
          return;
 
     if (frame.CanGoBack)
     {
          frame.GoBack();
          e.Handled = true;
     }
}

Analizamos que hemos hecho. Cada vez que se pulse la tecla física volver, entramos en nuestro código personalizado. Accedemos al Frame de la aplicación, y si no es nulo, navegamos atrás y anulamos el comportamiento por defecto.

Podéis descargar el ejemplo realizado a continuación:

Más información

Published 26/5/2014 20:54 por jsuarezruiz
Comparte este post: