Generation App – Día 9 – Realizar navegación de páginas en Windows Phone

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.xamlen el diseñador de Visual Studio.

  7. En el diseñador, selecciona el titulo de pagina y colócale main page en la propiedadText 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 enAdd

  10. Desde la vista de diseñador de SecondPage.xaml, renombra el titulo de la pagina aSecondPage 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.

En este punto, deberías tener tu aplicación con la interfaz bastante desarrollada (diseño visual y eventos), y la navegación entre cada pagina.

Autor: Jorge Ramirez
Publicación original –> http://j.mp/VMHpTX
Fuente 1 –> http://j.mp/11bK1B1

Anuncios

1 comentario

Archivado bajo Windows Phone

Una respuesta a “Generation App – Día 9 – Realizar navegación de páginas en Windows Phone

  1. Pingback: Con Generation App nunca fue tan fácil desarrollar para Windows Phone « El Blog de MSP para Latinoamerica [BETA]

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