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:

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

6 pensamientos en “WinRT. Navegación.

  1. Hola que tal, Hata ahora descubro tu blog y m parece genial era lo que estaba bucando; con respecto a este tutorial lo que pasa es que no manejo ni me gusta C# yo uso .net y al hacer lo que dices aqui no me deja me marca errores la palabra reservada This no esta habilitada aqui, quieresa que por favor si puedes realices tambien tutoriales en .net gracias por tu tiempo

    • Buenas Ivan,

      WinRT soporta tanto C++, como lenguajes de código manejado como JavaScript o bajo .NET, lenguajes de programación como VB.NET y C#. Por lo que comentas creo que trabajas utilizando VB.NET en lugar de C#. En los artículos de mas peso / importancia intentaré sacar tiempo para escribir los artículos en ambos lenguajes. Si tienes problemas con algun punto en concreto puedes preguntar😉. También tienes herramientas como:

      http://converter.telerik.com

      Convierte código C# a Visual Basic y viceversa.

      Un saludo.

  2. private void btEntrar_Click(object sender, RoutedEventArgs e)
    {
    if (tbUsuario.Text.ToString() == “honter” && pbPassword.Password.ToString() == “12345”)
    {

    NavigationService.Navigate(new Uri(“/Bienvenida.xaml”, UriKind.Relative));
    }
    else
    {
    tbMensaje.Text = “Incorrecto”;
    }
    }

    estiy desarollando una aplicacion whindows phone 8.1 y me marca un error en NavigationService.Navigate y no lo e podido solucionar.

  3. Buenas, al realizar este tutorial Me esta dando un error
    del tipo : Excepción no controlada del tipo ‘System.AccessViolationException’
    en this.Frame.Navigate(typeof(MainPageUser));

    • Hola Arturo,

      ¿Qué tipo de aplicación estas desarrollando?, ¿Windows Phone Silverlight, WinRT, UWP?. Aunque el concepto es muy similar, existen pequeños cambios importantes. Por el error sospecho que va relacionado con el acceso al Frame de la aplicación.

      Si la aplicación es UWP (Windows 10), en GitHub: https://github.com/jsuarezruiz/UAP-Samples
      Tienes ejemplos con servicios de navegación testeados y probados que puedes reutilizar sin problemas.

      Un saludo.

      • Hola perdón que responda tan tarde no había visto el mensaje, estoy desarrollando una aplicación Universal windows 10. el problema que tenia era pasando valores de una clase,
        al crearla con miclass hd = new miclas();
        esta me perdia los valores y navegaba sin datos dando ese error
        busque un metodo del listviwe e.itemclick
        y me permitio mandar los valores
        la forma que utilice para navegar es

        Frame.Navigate(typeof(MainPageUser), hd):

        Gracias por la ayuda..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s