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

En la entrada de hoy vamos a analizar y aprender como realizar la navegación entre distintas páginas de una aplicación Windows Phone. Es un punto clave y básico me atrevería a decir que en cualquier proyecto que realices en Windows Phone salvo que sea una demo o ejemplo simple.

¿Porque?

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

¿Cómo navegamos de una página a otra?

En Windows Phone existe el servicio de navegación llamado NavigationService que nos permite realizar operaciones como, navegar de una página a otra, navegar de una página a otra pasando parámetros, volver a una página en la que hemos estado, etc.

Comencemos. Lo primero que realizaremos será crear un nuevo proyecto (Aplicación Windows Phone) que podéis llamar como prefiráis. La demo que tenéis al final de esta entrada se llama Demo_WP7_Navegacion.

Antes de poder redirigir a una segunda página, debemos tener una segunda página en el proyecto. Realizamos dicha operación añadiendo una página llamada “Pagina2.xaml”.

A continuación, podríamos renombrar el archivo “MainPage.xaml” a “Pagina1.xaml” para facilitar el trabajo (si realizas esta operación recuerda modificar el archivo “WMAppManifest.xml”, explicaremos la utilidad de dicho archivo en una futura entrada). Vamos a modificar el XAML de la página “Pagina1.xaml”:

<phone:PhoneApplicationPage
x:Class="Demo_WP7_Navegacion.MainPage"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="NavigationService" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Página 1" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

</Grid>
</Grid>
</phone:PhoneApplicationPage>

Dentro del Grid principal añadiremos un botón:

<Button Width="200" Height="30" Content="Pagina 2" Click="Button_Click"/>

Como se puede observar estamos subscritos al evento Click del botón. En el code behind correspondiente (Pagina1.xaml.cs) añadiremos el siguiente código:

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

Muy simple, ¿verdad?. Lo único que hemos hecho es pasarle al servicio de navegación una nueva Uri con la ruta hacia la segunda página.

Pulsa F5, vamos a probar lo que llevamos.

Un dato que aún no hemos mencionado es que el servicio de navegación guarda un historial de navegación. Es decir, se guardará que antes de estar en la pagina2 nos encontrabamos en la pagina1. Esto es una funcionalidad importante que explicaremos mejor enseguida, pero recuerda que para volver hacia atrás (es decir, a la página anterior) siempre utilizaremos el botón físico Volver que tiene todo dispositivo Windows Phone. Todo dispositivo Windows Phone ha de cumplir unas especificaciones mínimas entre las que se encuentran trees botones físicos que son:

  • Volver
  • Inicio
  • Buscar

El botón volver tiene dos usos básicos. Si estamos en la página principal o primera página de nuestra aplicación y no hay historial de navegación, al pulsar el botón volver la aplicación se debe cerrar. Si por el contrario existe un historial de navegación, por ejemplo, estamos en la página 2 viniendo de la página 1, al pulsar el botón volver debemos recorrer el historial de navegación, es decir, en nuestro caso volveríamos a la página 1.

Recuerda siempre este comportamiento cuando realices tus desarrollos porque tu aplicación no pasaría las pruebas de certificación si no lo cumple.

¿Cómo podría mi aplicación no cumplir la funcionalidad del botón volver si el historial de navegación se guarda de manera automática?

En cada página podemos controlar que hacer cuando el usuario pulsa el botón volver gracias al método OnBackKeyPress. Podremos realizar acciones típicas como mostrar un mensaje informativo antes de abandonar la página, almacenar cualquier tipo de información necesaria, etc. Este evento de navegación junto al resto disponibles lo analizaremos en la 2º parte correspondiente a la navegación entre páginas.

¿Cómo pasamos un parámetro de una página a otra?

En ocasiones no bastará con redirigir de una página a otra. Además necesitaremos incializar la página con valores provenientes de la anterior. Si son parámetros simples (cadenas, números o valores boleanos) podemos pasar los parámetros sencillamente tal y como lo haríamos en una página web(un signo de interrogación ? precede al primer parametro y los  subsiguientes van precedidos de un carácter &).

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

En la segunda página(pagina2.xaml) recuperaremos el valor utilizando la propiedad QueryString del objeto NavigationContext. Todo ello desde el método sobreescrito OnNavigatedTo:

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

     string parametro = string.Empty;
     if (NavigationContext.QueryString.TryGetValue("parametro", out parametro))
         tbNombre.Text = parametro;
}

El resultado final de todo lo realizado lo podéis ver el el siguiente video:

Si queréis también podéis descargaros el ejemplo correspondiente a esta entrada:

Nada más por hoy. Espero que os haya gustado la entrada. Continuaremos con la navegación en Windows Phone en una segunda entrada donde analizaremos todos los eventos de navegación disponibles o como pasar parámetros más complejos entre páginas. También os animo a que probéis  y si tenéis dudas recordad que podéis añadir comentarios a la entrada. Las dudas que te surgan pueden ser las mismas que le surgan a otro compañero.

Más información

Blog MSDN: Reto Windows Phone: Navegar por tu aplicación

17 pensamientos en “Windows Phone. Navegación entre páginas. 1º Parte.

      • Como pasar mas de un parámetros, por decir (nombre, apellidos, dirección, correo electrónico, teléfono, etc.)…lo intente de muchas formas y nada. AYUDA!!

      • Buenas Fidel,

        Tienes múltiples formas para realizarlo (por ejemplo, puedes pasar por query string como se muestra en el ejemplo de la entrada un objeto Persona con todas las propiedades que mencionas, nombre, apellidos, etc. rellenas) o puedes echarle un vistazo a la siguiente entrada donde se explica como hacer exactamente lo que quieres de otra forma (utilizando los métodos OnNavigatedTo y OnNavigatedFrom):

        https://javiersuarezruiz.wordpress.com/2012/06/07/windows-phone-navegacion-paso-de-objetos/

        Espero que te sea de utilidad para resolver tu duda. Si sigues sin poder resolverla contesta con un comentario y buscamos solución😉

      • Claro. Haremos lo posible. Explícame con más detalles que deseas hacer. Supongo que que quieres por ejemplo, seleccionar un elemento de una lista y mostrar los detalles del elemento seleccionado consultando a la base de datos dichos detalles. Siempre puedes pasar el identificador del elemento seleccionado, y realizar una consulta a la base de datos de los detalles de un elemento dado un ID en la siguiente página.

        Explica con más detalles la situación (no hace falta que especifiques detalles de la aplicación). Supongo que utilizas SQL CE, ¿es asi?, como estas pasando el parámetro, etc.

        Un saludo.

  1. Si utilizo SQL CE, tengo una base de datos de usuarios. La primera pagina es para iniciar sesión y hay 1 textbox (donde se introduce el correo del usuario)y un password para la contraseña, en base a esta información evaluar si el usuario existe y si es así pase la información a la primera pagina de un panorama con toda la información del usuario.

    • Puedes hacerlo de distintas formas principalmente depende de los datos con los que trates (la cantidad más que el tipo).

      Primera opción. Puedes validar al usuario en la página donde debe introducir usuario y contraseña. Una vez validado es cuando realizas la navegación a la siguiente página (Panorama con la información). Pasas en la navegación el ID del usuario validado para en la siguiente página consultar la BBDD para obtener la información del usuario y mostrarla. Esta opción es válida si lo que vas a mostrar en el Panorama no es mucha información y todo el proceso va rápido y fluido.

      Segunda opción. Al igual que antes validas al usuario en la página donde debe introducir usuario y contraseña. Si falla la validación muestra una notificación al usuario. Por el contrario, si valida correctamente, obtienes la información del mismo de la BBDD y la pasas a la siguiente página en la navegación. Veo esta opción mejor. Dado que salvo que la información sea leve, con la primera opción el usuario navegará al Panorama y podrá llegar a ver el Panorama sin contenido (aunque sea un periodo muy leve de tiempo). Con esta segunda opción lo evitas.

      Espero que te sea de ayuda. Si tienes alguna otra pregunta no dudes en realizarla.

      Un saludo.

      • Si tengo todo la interfaz lista con el mensaje de error, el problema es que no puedo tomar el dato concreto del usuario, mira utilizo esta función para tomar y evaluar al usuario:

        —————————————–
        var cor = textBox1.Text;
        var con = passwordBox1.Password;

        MyDataContext db = new MyDataContext(“isostore:/MisUsuarios1.sdf”);
        var nom = from b in db.MisUsuarios where b.Nombre == cor select b.Nombre;
        var minombre = nom.ToString();<—–//En esta parte no se si este tomando correctamente el dato
        var contra = from b in db.MisUsuarios where b.Contraseña == con select b.Contraseña;
        var micontraseña = contra.ToString();<—–//En esta parte no se si este tomando correctamente el dato
        if (cor == minombre && con == micontraseña)
        {
        NavigationService.Navigate(new Uri("/PanoramaPage1.xaml?parametro=", UriKind.Relative));
        }
        else
        {
        textBlock3.Text = "El Usuario "+ cor +" y/o Contraseña son erroneos!!";
        }
        ———————————

        Me falta saber con que método puedo tomar el dato de la base para posteriormente evaluarlo con el textbox y el passwordbox.
        ¿Crees poderme ayudar con eso??

  2. Pingback: Capítulo 4. Una aplicación para Windows Phone 8 | bigjacky

  3. Hola! buen aporte, pero tengo una duda, si quisiera hacer una navegación entre 2 páginas de distintos proyectos como lo puedo hacer? Dentro de una solución tengo 2 proyectos y necesito que desde la pagina de menu del proyecto 1 me mande respectivamente a la opción que selecciono del proyecto 2. Lo realizamos así ya que mi compañero y yo nos dividimos el trabajo pero al momento de juntar las partes no hemos conseguido enlazar las páginas.

  4. amigo como hago para agregarle al evento de navegacion entre paginas una animacion de cambio de pagina. por ejemplo, cuando le das back para salir de la aplicacion hace una animacion. quiero implementarla en la navegacion. gracias

  5. Hola Javier, primero que todo muchas gracias por tus grandes aportes.

    Tengo un problema y es el siguiente: tengo una aplicación la cual esta echa con un panorama, pero en mi pagina principal se encuentran unos botones que deberían llevarme directamente a a uno de los PanoramaItem. Mi problema es que no se cual es el método que debo usar o como realizo esta tarea.

    De antemano muchas gracias por tu 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