WinRT. Navegación.

Introducción

Casi cualquier aplicación que realices tendrá más de una página salvo que sea una demo o ejemplo simple. Por lo que es vital saber como navegar entre ellas. En este artículo analizaremos paso a paso la navegación entre diferentes páginas de una misma aplicación Windows 8.

Navegación entre páginas de una aplicación Windows Store

Como siempre solemos hacer vamos a realizar un ejemplo lo más simple posible pero que nos sea válida para lograr nuestros objetivos. La plantilla selecciona para realizar el ejemplo lo más simple posible será “Blank Application”.

Blank Application

Modificamos el fondo del Grid principal para poder distinguir con facilidad la página en la que nos encontramos y añadimos el botón que nos permitirá realizar la navegación a otra página.

<Grid Background="Orange">
     <Button Content="Navegar" HorizontalAlignment="Center"/>
</Grid>

Si compilamos la aplicación hasta este punto obtendremos el siguiente resultado:

Página principal. El botón nos permite navegar a la siguiente página.

Antes de continuar. Para permitir realizar la navegación a una segunda página, debemos agregar a nuestro proyecto dicha segunda página. Es muy fácil. Seleccionamos el Proyecto, hacemos clic derecho y seleccionamos la opción Agregar. A continuación, seleccionamos la opción Nuevo elemento:

Agregar Nuevo Elemento

Tras hacer clic en la opción nuevo elemento se nos abrirá el cuadro de diálogo Agregar nuevo elemento:

Nueva página en blanco (plantilla más simple)

Seleccionamos una página en blanco entre todas las pantillas disponibles, le asignamos un nombre (en nuestro ejemplo se le ha llamado “Pagina.xaml”) y agregamos. Tras añadir la segunda página, vamos a añadir la lógica necesaria para realizar la navegación. Primero añadimos en nuestro página principal el evento Click del botón que habíamos añadido:

<Grid Background="Orange">
     <Button Content="Navegar" HorizontalAlignment="Center" Click="ButtonClick"/>
</Grid>

En el Code Behind correspondiente:

private void ButtonClick(object sender, RoutedEventArgs e)
{
     this.Frame.Navigate(typeof(Pagina), "Test Parametro");
}

Analicemos el código. Windows 8 nos proporciona 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 segunda sobrescritura del método pasando un String como parámetro.

Modificamos a continuación el fondo de la segunda página de igual manera que ya hicimos con la página principal. Además, añadimos un TextBlock que será el encargado de mostrar el parámetro pasado desde la página principal:

<pre><Grid Background="Pink">
     <TextBlock x:Name="tbParametro" FontSize="32" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

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

• OnNavigatedTo. Se ejecuta al entrar en la página.
• OnNavigatedFrom. Se ejecuta al abandonar la página.

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)
{
     var parametro = e.Parameter as string;

     if (parametro != null)
          tbParametro.Text = parametro;
}

En nuestro ejemplo, hemos recuperado el String y se lo hemos asignado a un Textblock correspondiente a la segunda página. El resultado tras la navegación:

Segunda página. El texto ha sido recibido como parámetro en el proceso de navegación.

Fácil, ¿verdad?.

Puedes descargar el ejemplo realizado:

Nada más por hoy. Espero que lo visto en esta entrada os sea de utilidad. En próximas entradas analizaremos paso a paso como gestionar la navegación entre páginas utilizando MVVM. Recordar que cualquier duda o sugerencia podéis plantearlas en los comentarios.

Extras. Windows 8 VS Windows Phone.

Creo interesante realizar una comparativa entre la navegación de aplicaciones Windows Store en Windows 8 y las aplicaciones Windows Phone. La navegación en ambos casos es muy similar, utilizamos un método Navigate. La diferencia radica en el parámetro recibido por el método. En Windows Phone utilizamos una URI hacia la página que deseamos navegar, mientras que en Windows 8 pasamos directamente el tipo de la página a la que se va a realizar la navegación:

Windows Phone:

NavigationService.Navigate(new Uri("/Pagina.xaml", UriKind.Relative));

Windows 8:

this.Frame.Navigate(typeof(Pagina));

La navegación hacia atrás (volver) también es sumamente similar en ambos sistemas, utilizaremos para ello en ambos casos el método GoBack:

Windows Phone:

NavigationService.GoBack();

Windows 8:

this.Frame.GoBack();

Por último, vamos a comparar como pasar parámetros en ambos sistemas. En Windows Phone utilizamos el sistema query string, es decir, en la URI de la página hacia la que se realiza la navegación se añade el parámetro (un signo de interrogación ? precede al primer parametro y los  subsiguientes van precedidos de un carácter &). En Windows 8 podemos pasar directamente parámetros utilizando el segundo parámetro del método Navigate:

Windows Phone:

NavigationService.Navigate(new Uri("/Pagina.xaml?parametro=hola", UriKind.Relative));

 

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

     string parametro = string.Empty;
     if (NavigationContext.QueryString.TryGetValue("parametro", out parametro))
     {

     }
}

Windows 8:

this.Frame.Navigate(typeof(Pagina), "hola");

 

protected override void OnNavigatedTo(NavigationEventArgs e)
{
     var parametro = e.Parameter as String;
}

Más información

• Blog Roberto Luis Bisbé: Navegación entre páginas con Metro en C#.
• MSDN: Navigation design for Windows Store apps.

About these ads