Reto Windows Phone: Navegar por tu aplicación
¿Qué necesito para empezar?
Para empezar a programar aplicaciones Windows Phone necesitamos descargarnos las Windows Phone developer tools 7.1 Beta 2. Con estas herramientas se puede desarrollar tanto para la versión 7 como para la versión 7.1 o Mango, que es la próxima actualización del sistema operativo.
La descarga incluye a parte de las herramientas para Windows Phone y el emulador, el SDK de Silverlight 4 y DRT, la actualización de las extensiones de XNA Game Studio 4.0, el SDK de Expresion Blend y los WCF Data Services Client para Windows Phone 7.1.
En caso de no tener una versión de Visual Studio 2010 Profesional o superior se instalará Visual Studio 2010 Express para Windows Phone junto con los demás componentes.
Estamos atentos a tus comentarios en el twitter de @esmsdn y en el hashtag #retosmsdn.
De página a página
La clase NavigationService nos permite controlar todo lo referido a la navegación entre páginas de nuestra aplicación. Podremos redirigir a otras páginas y volver atrás.
Para poder decidir a qué página vamos utilizaremos el método Navigate en el que podemos pasarlo como parámetro una URI que será el nombre de la página a la que queremos ir.
Vamos a crear una nueva aplicación Windows Phone, con nombre DemoNavegacion, para probar el sistema de navegación. Seleccionaremos la versión 7.1.
En la ventana principal pondremos un botón que usaremos para cargar la otra pantalla a la que queremos ir.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Name="b_navegar" Content="Saludar" Width="250" Height="100"/>
</Grid>
El siguiente paso es añadir otra página al proyecto para que cuando presionemos el botón vayamos a ella. Haciendo clic con el botón derecho en el proyecto seleccionamos “añadir” y después “añadir un nuevo elemento”. También podemos presionar “Ctrl+Shift+A”.
Nos aparecerá la ventana para agregar un nuevo elemento y elegiremos una nueva página en orientación Portrait (retrato). Le daremos el nombre “Saludo.xaml” y añadimos.
Cuando lo hayamos hecho aparecerá en nuestro explorador del proyecto el nuevo fichero generado “Saludo.xaml”.
En esta página simplemente pondremos un Textblock mostrando el mensaje de “Hola”.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Name="tb_saludo" Text="Hola" FontSize="36"/>
</Grid>
Lo que queremos hacer es que cuando presionemos el botón de la página principal naveguemos hacia la página “Saludo.xaml”. Haremos doble clic encima del botón en la vista de diseño y se nos abrirá la vista de código de la página en la que tendremos un nuevo método creado, b_navegar_Click, para realizar la lógica del botón. En el método Navigate indicaremos la URI de la página que queremos cargar de la siguiente forma:
private void b_navegar_Click(object sender, RoutedEventArgs e) {
} |
Si ejecutamos podremos ver el resultado. Al hacer clic en el botón iremos a la siguiente página mostrando la de “Saludo.xaml”.
Nota: Hemos cambiado la propiedad Text de los Textblock ApplicationTitle y PageTitle para mostrar los títulos “Principal” y “Saludo”.
Navega y envía datos
Para pasar de página a página se utiliza la URI con el nombre de la página hacia la que vamos a ir. Dentro de esa URI podemos pasar también datos de texto en forma de consulta. Vamos a poner un Textbox en nuestra página principal para añadir texto y enviarlo dentro de la URI para poder recogerlo desde la página de saludo y mostrarlo en ella.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox Name="tb_nombre" Margin="12,6,6,0" Height="74" VerticalAlignment="Top" />
<Button Name="b_navegar" Content="Saludar" Width="250" Height="100" Click="b_navegar_Click" Margin="104,116,102,391" />
</Grid>
Ahora cogeremos el texto de ese Textbox y lo pasaremos a la URI con este código:
private void b_navegar_Click(object sender, RoutedEventArgs e) {
} |
Con “?” señalamos que lo siguiente en la URI es una variable y después asignamos el valor con el texto del Textbox.
Para poder recoger el valor de la URI en la página destino hay que sobrescribir el método OnNavigateTo desde el que podremos examinar la petición de navegación para la URI y extraer la información. Con NavigationContext.QueryString obtenemos los pares de clave/valor de la consulta para que después podamos obtenerlas utilizando el método TryGetValue.
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e); string nombre = ""; if (NavigationContext.QueryString.TryGetValue("nombre", out nombre))
} |
Ir atrás
El sistema de navegación permite volver a la página anterior. En nuestras aplicaciones no debemos crearnos un botón propio para volver atrás ya que el usuario debe utilizar el botón del propio teléfono, en caso contrario no pasaríamos la certificación.
Para el reto vamos a explicarlo pero no debemos usarlo en nuestras aplicaciones.Para volver atrás primero hay que hacer una comprobación de si es posible y después hacerlo:
if (NavigationService.CanGoBack)
|
El botón del teléfono permite volver a la página anterior sin necesidad de crear ningún tipo de código alternativo. Podemos capturar el evento que genera este botón y realizar alguna acción, como por ejemplo mostrar un mensaje pidiendo confirmación al usuario de si quiere volver atrás o no. Para ello debemos sobrescribir el método OnBackKeyPress :
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e) { if (MessageBox.Show("¿Desea volver atrás?", "Aviso", MessageBoxButton.OKCancel)==MessageBoxResult.Cancel) { e.Cancel=true; } base.OnBackKeyPress(e); } |
Tu turno… ¡el Reto! – Marinero de primera
Ya te hemos enseñado todo lo necesario para navegar entre páginas con Windows Phone. Ahora te toca implementar el siguiente sistema de navegación entre páginas y convertirte en un buen marinero:
Tendremos la pantalla principal, la de saludo y otra nueva de ver reto. En la de saludo hay que añadir un ListBox para poder seleccionar el reto que queremos ver, un botón para ir a la página de “VerReto.xaml” y 1 botón más para ir atrás.
En la nueva página “VerReto.xaml” añadiremos un control WebBrowser para mostrar el reto elegido y un botón de volver. En esta página capturaremos el índice del Listbox que pasaremos como parámetro en la URI para saber qué reto hemos elegido en la anterior página.
Recursos: Centro de desarrollo de Windows Phone
Solución: https://msdn.microsoft.com/es-es/windowsphone/hh527030
Participa: twitter de @esmsdn o hashtag #retosmsdn.
José Perona – @JVPerona - Developer Evangelist Jr.
Ver el primer Reto Windows Phone: Mi primera interfaz metro
Ver el tercer Reto Windows Phone: Control Panorama