Navegación entre páginas XAML: Windows Phone 7.5 Desarrollo de aplicaciones Mango - Parte 21

Bienvenido de nuevo a la serie de desarrollo de la aplicación Windows Phone 7.5 Mango. En el último tutorial explicamos cómo aplicar estilo y temas a los controles, en este tutorial veremos una forma de navegar entre páginas y pasar datos de una página a otra.

Cargamos páginas XAML en aplicaciones de Silverlight justo cuando cargamos HTML páginas en un navegador web. Como en un sitio web, cada sitio web tiene su propia URL única (Localizador Unificado de Recursos), por ejemplo, www.thewindowsclub.com. En una aplicación Windows Phone 7.5, utilizamos un control de botón de hipervínculo y usamos su propiedad NavigateURI con el URI (identificador de recurso unificado) de la página XAML que desea cargar. Empecemos con un ejemplo.

Cree un nuevo proyecto con un nombre único como `NavigationDemo`. A continuación, haga clic con el botón derecho en el nombre del proyecto en el explorador de soluciones y seleccione Agregar y luego Nuevo elemento. En la ventana Agregar nuevo elemento, seleccione `Página de retrato de teléfono de Windows`, asígnele un nombre como Page1.xaml y luego haga clic en el botón Agregar en la parte inferior. Esto creará una nueva página que se muestra en una pestaña separada en el área de diseño principal. Solo para mayor claridad, cambie el título de la página de la nueva página a `Nueva página` cambiando la propiedad Texto del Título de la página Bloque de texto. A continuación, en la pestaña MainPage.xaml, arrastre y suelte un botón de hipervínculo en el área de diseño. Ahora cambie la propiedad NavigateUri en la ventana Propiedades para el botón de hipervínculo. Inserte la siguiente cadena

/NavigationDemo;component/Views/Page1.xaml

Ahora ejecute la aplicación y haga clic en el botón de hipervínculo que se muestra en el emulador. Se lo dirigirá a Page1.xaml desde MainPage.xaml.

Ahora, para enviar información de una página a otra, usamos una Querystring. Por lo tanto, considere una URL como www.abcxyz.com/images.aspx?id=3&language=en. Aquí todo después del signo de interrogación se llama cadena de consulta. Puedes notar que tenemos dos pares de valores de nombre, viz., Id = 3 y languae = en. El ampersand nos permite agregar diferentes elementos de información, en este caso, identificador e idioma.

Ahora, como continuación de nuestro proyecto, arrastraremos y soltaremos un TextBlock en la página Page1.xaml. Borre la propiedad TextBlock.Text e inserte el siguiente código C # en el evento PhoneApplicationPage_Loaded.

textBlock1.Text = String.Format ("Value: {0}", NavigationContext.QueryString ["id"]);

So en esta línea de código, utilizamos el NavigationContext que nos da acceso a la URL, específicamente a la querystring. Especificamos el elemento al que deseamos acceder entre corchetes.

Antes de ejecutar la aplicación, cambiaremos la propiedad NavigateUri del botón de hipervínculo a la siguiente

/NavigationDemo;component/Views/Page1.xaml?id = 1

También arrastraremos y soltaremos otro botón de hipervínculo en MainPage.xaml y estableceremos su propiedad navigateUri en el siguiente

/NavigationDemo;component/Views/Page1.xaml?id=2

Ahora cuando ejecute la aplicación y haga clic en un botón de hipervínculo en el emulador podremos ver el valor de la ID pasada desde MainPage.xaml. Así de fácil es navegar entre páginas en una aplicación de Windows Phone 7. Sigue practicándolo hasta que lo hagas bien. Ahora, aprendamos cómo trabajar con la barra de aplicaciones.