Para este día en Generation Apps, quiero mostrarte algo de vital importancia para tu aplicación. Es la navegación, es decir, la forma cuando el usuario es llevado de una pagina a otra. Es algo común que encuentras en cualquier aplicación independientemente de la plataforma en la que te encuentres. Ya que en días anteriores tienes tu mapa de navegación esquemático, es hora de implementarlo en tu proyecto Windows Phone.

En el siguiente video, te mostrare como se hace esto con Expression Blend. Hay diversas formas de como implementarlo, e incluso te mostrare como se hace el pase de parámetros, para enviar datos de una página a otra.

Crear una pagina adicional

1. Ejecuta Visual Studio 2010 Express para Windows Phone.

2. Crea un nuevo proyecto seleccionando haciendo clic en Archivo | Nuevo Proyecto

3. La ventana de Nuevo Proyecto aparece. Expande las plantillas de Visual C#, y selecciona la plantilla Silverlight para Windows Phone.

4. Ahora selecciona la plantilla Aplicación Windows Phone. Coloca de nombre de proyecto tu preferencia.

5. Da clic a OK. La ventana de selección de plataforma Windows Phone aparece. Selecciona Windows Phone OS 7.1 para la versión de Windows Phone objetivo.

6. Da clic a OK. El proyecto nuevo es creado y se despliega el archivo MainPage.xaml en el diseñador de Visual Studio.

7. En el diseñador, selecciona el titulo de pagina y colócale main page en la propiedad Text o directamente en el XAML

   

8. Da clic derecho sobre el proyecto, selecciona Add->New Item

9. Selecciona Windows Phone Portrait Page. Nómbralo SecondPage, da clic en Add

10. Desde la vista de diseñador de SecondPage.xaml, renombra el titulo de la pagina a SecondPage en la propiedad Text o directamente en el XAML

Navegación entre paginas

1. En MainPage.xaml, arrastra un botón tipo HyperlingButton desde el toolbox hacia el ContentPanel de la pagina. Selecciona el control y en las propiedades, asigna el valor Content el texto «Navigate To Second Page» o directamente en el XAML. Deberás expandir el ancho del control para ver el texto completo.

2. Da un doble clic en el botón de hipervínculo para agregar el manejador de evento clic. El archivo MainPage.xaml.cs es desplegado.

3. Para el evento Hyperlinkbutton1_Click, agrega la siguiente instrucción dentro del método:

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

4. En SecondPage.xaml, arrastra un botón del toolbox a la superficie del diseñador. Selecciona el control y cambia el valor de la propiedad Content a Navigate Back to Main Page o hazlo directamente en el XAML. Expande el botón para visualizar el texto completo.

5. Da doble clic sobre el botón para agregar el manejador del evento clic button1_clic, El archivo SecondPage.xaml.cs será desplegado.

6. Dentro del método button1_Clic, agrega la siguiente instrucción:

   NavigationService.GoBack();

7. Ejecuta la aplicación con el comando de menú Debug | Start Debugging. Esto abrirá el emulador ejecutando tu aplicación

Cuando ejecutas la aplicación, veras que consiste de dos paginas: la pagina MainPage y SecondPage. Puedes navegar del MainPage hacia la pantalla secundaria usando el botón de hipervínculo con el URI destino en el evento clic. Puedes retornar de la pagina secundaria hacia la pagina principal usando el metodo GoBack().

Pasando Parámetros

1. En MainPage.xaml, arrastra un control TextBox y un Button del toolbox y ubícalo debajo del botón de hipervínculo. Elimina el texto dentro del textbox. Para el botón, renómbralo a passParam, y en la propiedad Text, coloca Go.

2. Da doble clic al botón Go, para agregar el manejador de evento clic.

3. En el método passParam_Click recién generado, agrega la siguiente instrucción:

   NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative));

4. En SecondPage.xaml, arrastra un control tipo TextBlock del toolbox y ubícalo debajo del botón de retornar al main page. Elimina el texto dentro del TextBlock. Si deseas, incrementa las dimensiones del textblock al ancho del panel y un tamaño de fuente mayor para visualizar el parámetro mas fácilmente.

5. Ahora en SecondPage.xaml.cs, crea el siguiente método debajo del constructor.

   protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
   {
      base.OnNavigatedTo(e);
      string msg = "";
   
      if (NavigationContext.QueryString.TryGetValue("msg", out msg))
          textBlock1.Text = msg;
   }

6. Ejecuta la aplicación con el comando de menú Debug | Start Debugging. Esto abrirá el emulador ejecutando tu aplicación. Ingresa texto en el TextBox y da clic sobre el botón Go, y veras que el mensaje ingresado aparecerá en la pagina secundaria.

Fuente:
How to: Perform Page Navigation on Windows Phone