Windows Phone. Navegación entre páginas. 2º Parte.

Esta entrada es la continuación de la entrada «Windows Phone. Navegación entre páginas. 1º Parte.» disponible aquí. Vamos a analizar los distintos eventos de navegación existentes, como utilizarlos y que ventajas nos aportan.

Eventos de navegación entre páginas

Ya vimos en la primera parte como podíamos navegar de una página a otra incluso pasando parámetros. En Windows Phone tenemos además dos eventos de navegación que nos permiten controlar la navegación entre páginas. Los dos métodos disponibles son:

• OnNavigatedTo
• OnNavigatedFrom

El primero de ellos se ejecutará siempre que una página pasa a ser la página activa (se entra en la página). El segundo de los eventos se ejecutará cuando la página deja de ser la página activa (salimos de la página).

Vamos a comenzar realizando una aplicación de ejemplo (que puedes descargar al final de la entrada) donde iremos viendo como funcionan ambos eventos. Nuestro proyecto contará con dos páginas. En ambas páginas utilizaremos los eventos OnNavigatedTo y OnNavigatedFrom.

Crea un nuevo proyecto. Añade una segunda página (en este ejemplo la he llamado «Pagina2.xaml»). En la primera de las páginas (MainPage.xaml) dentro del Grid principal añade un botón para poder redirigir a la segunda página. Quedaría algo así:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button x:Name="btnPag2" Content="Página 2" Background="Blue" Height="100" Click="btnPag2_Click"
</Grid>

Nada nuevo bajo el sol, ¿verdad?. Es algo que ya vimos en la primera parte de la navegación entre páginas. Sólo hemos añadido un botón que nos permita redirigir a la segunda página. Para recordar, veamos que debemos hacer en el evento Click del botón (MainPage.xaml.cs):

 private void btnPag2_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Pagina2.xaml", UriKind.Relative));
}

Llegamos a la parte interesante del artículo, es decir, vamos trabajar con los eventos OnNavigatedTo y OnNavigatedFrom.
Ambos eventos reciben un parámetro de tipo NavigationEventArgs. Gracias a este parámetro podremos saber información de suma utilidad sobre la navegación entre páginas como el contenido de la página a la que nos dirigimos, su Uri o el tipo de navegación.

Vamos a añadir en ambas páginas los dos eventos de navegación. Quedaría algo así:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
     base.OnNavigatedTo(e);

     MessageBox.Show("Método OnNavigatedTo de la página principal" + Environment.NewLine +
     string.Format("Contenido: {0}", e.Content) + Environment.NewLine +
     string.Format("Uril de destino: {0}", e.Uri) + Environment.NewLine +
     string.Format("Modo de navegación: {0}", e.NavigationMode));
}

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
     base.OnNavigatedFrom(e);

     MessageBox.Show("Método OnNavigatedFrom de la página principal" + Environment.NewLine +
     string.Format("Contenido: {0}", e.Content) + Environment.NewLine +
     string.Format("Uril de destino: {0}", e.Uri) + Environment.NewLine +
     string.Format("Modo de navegación: {0}", e.NavigationMode));
}

Es simple. En cada uno de los eventos hemos añadido mensajes informativos con la información básica proporcionada por el parámetro NavigationEventArgs.

Recuerda colocar ambos eventos en ambas páginas. Llegado a este punto compilamos para analizar el orden en el que nos van apareciendo los mensajes y su contenido.

Lo primero que veremos es lo siguiente:

Como se puede observar ha saltado el evento OnNavigatedTo que recordamos saltaba cuando una página pasaba a ser la página activa. Entre sus parámetros podemos ver en el contenido la instancia actual de la página (MainPage), en la Uri vemos la Uri utilizada para llegar a la página actual y a destacar la información proporcionada por el modo de navegación que nos indica New, es decir, se ha creado una nueva instancia de la página ya que la abrimos por primera vez.

Si a continuación hacemos clic sobre el botón para navegar hacia la segunda página vemos algo así:

Si os fijáis en la captura de fondo aún vemos la página principal (MainPage). Ha saltado el evento OnNavigatedFrom de la página principal. Recordad que dicho evento salta cuando la página deja de ser la página activa, es decir, abandonamos la página. Entre los parámetros hay que destacar que estamos recibiendo una nueva instancia de la página hacia donde vamos (página 2) junto a su Uri y el modo de navegación nos vuelve a marcar New.

Justo tras este mensaje obtenemos el siguiente:

Pues la página activa ha pasado a ser la página 2, salta su evento OnNavigatedTo obteniendo unos parámetros similares a los obtenidos ya anteriormente.

Si pulsamos el botón Volver del dispositivo para regresar a la página principal:

Primero salta el evento OnNavigatedFrom de la página 2 que va a dejar de ser la página activa. Interesante los parámetros obtenidos. Tanto en contenido como la Uri nos indica la página principal, es decir, hacia donde vamos. Sin embargo, si nos fijamos en el tipo de navegación nos indica Back no New.  Estamos utilizando el botón volver del dispositivo.

Justo tras este mensaje obtenemos:

El evento OnNavigatedTo de la página principal al igual que cuando entramos pro primera vez en la aplicación con parámetros iguales salvo el modo de navegación. De esta forma hemos ido analizando como han ido saliendo los sucesivos mensajes correspondientes a los eventos de navegación.

¿Qué sucederá si pulsamos el botón físico volver del dispositivo en la página principal?

Espero que hayáis acertado. Nos salta el evento OnNavigatedFrom de la página principal que va a ser abandonada. Lo más interesante de todos los parámetros es el obtenido en la Uri de destino. Nos indica «app://external/». Salimos de la aplicación.

Puedes ver en video el resultado final de toda la aplicación de ejemplo a continuación:

También puedes descargar el ejemplo utilizado en esta entrada:

Nada más por hoy. Ya quedan pocos casos que ver relacionados directamente con la navegación. Seguiremos viendo nuevas situaciones en futuras entradas. Recordar que podéis plantear dudas o sugerencias en los comentarios de la entrada.

Más información:

MSDN: OnNavigatedTo y OnNavigatingFrom