Solución Reto Windows Phone: Navegar por tu aplicación

Artículo
10/20/2021

En el segundo reto de Windows Phone pondremos en práctica lo aprendido en éste y en el primero. Crearemos 2 páginas nuevas con controles y crearemos el sistema de navegación para ir de una a otra como se muestre en la imagen:

Visual Studio. Si ya tienes VS instalado perfecto, pero por si acaso, aquí tienes el enlace de descarga de la versión gratuita express o de la Ultimate Trial.

Windows Phone developer tools 7.1.Con esta descarga tendremos todo lo necesario para empezar a programar aplicaciones para los dispositivos con Windows Phone

Crear las páginas

Una vez que creemos un nuevo proyecto para Windows Phone 7.1 empezaremos por crear las otras 2 páginas para que podamos navegar entre ella. Estas páginas las llamaremos Saludo.xaml y VerReto.xaml. Para añadir una nueva página debemos presionar con el botón derecho encima del proyecto y seleccionamos “añadir”, después “añadir un nuevo elemento” o directamente podemos presionar “Ctrl+Shift+A”. Elegiremos el elemento Windows Phone Portait Page.

Navegar de la página principal a Saludo.xaml

Vamos a empezar por personalizar la página principal de aplicación MainPage.xaml para que quede con el aspecto que nos pide el reto.

Primero cambiaremos los títulos de la aplicación y de la página para más tarde añadir un TextBlock y un botón.

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="DemoNavegacion" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Principal" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<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>

Una vez tenemos los controles ya podemos pasar a implementar la parte de navegación. Para ello tenemos que crear el evento “Click” del botón para que cuando se presione navegue hacia la página de Saludo.xaml enviando el texto que aparece en el TextBox para que se muestre en la otra página.

private void b_navegar_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate( new Uri("/Saludo.xaml?nombre=" + tb_nombre.Text,UriKind.Relative));
}

Recibir datos en la página

Como pasa con la otra página primero vamos a añadir los controles oportunos y después nos encargaremos del código.

Crearemos un TextBlock donde pondremos el valor recibido de la página principal, por otro lado tenemos la sección de envió de datos que en este caso será un ListBox donde elegiremos el tipo de reto que queremos ver para pasarlo como parámetro a la otra página y un botón para ir a VerReto.xaml.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
        <TextBlock Name="tb_saludo"  Text="Hola" FontSize="36" Height="100" />
        <TextBlock Name="tb_operacion"  Text="Selecciona reto" FontSize="36" Height="47" />
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="107">
            <ListBox Name="lb_reto" Height="150"  HorizontalAlignment="Center" Width="423"
            SelectionChanged="lb_reto_SelectionChanged">
                <ListBoxItem >
                    <TextBlock Text="Azure" />
                </ListBoxItem>
                <ListBoxItem >
                    <TextBlock Text="Kinect" />
                </ListBoxItem>
                <ListBoxItem >
                    <TextBlock Text="WP" />
                </ListBoxItem>
                <ListBoxItem >
                    <TextBlock Text="HTML5" />
                </ListBoxItem>
            </ListBox>
        </StackPanel>
        <Button Name="bt_ver" Content="Ver reto" Height="84" Click="bt_ver_Click" IsEnabled="False" />
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="164">
            <Button Name="bt_atras" Content="Volver" Width="150" Height="75" Click="bt_atras_Click" />
        </StackPanel>
    </StackPanel>
</Grid>

Para recoger el dato enviado en la página anterior y mostrar en el TextBlock utilizaremos el siguiente código:

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

Utilizamos NavigationContext para obtener el valor del parámetro nombre.

Después crearemos 2 eventos, uno para el ListBox para que se active el botón cuando haya un valor de éste seleccionado y no enviemos un valor vacío y otro para el botón para enviarlo a la siguiente página.

private void lb_reto_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    bt_ver.IsEnabled = true;
}

private void bt_ver_Click(object sender, RoutedEventArgs e)
{
    if (lb_reto.SelectedValue != null)
        NavigationService.Navigate( new Uri("/VerReto.xaml?reto=" + lb_reto.SelectedIndex, UriKind.Relative));
}

Mostrar el reto elegido

Ya sólo nos falta una página. En VerReto.xaml recogeremos el valor del parámetro “reto” y mostraremos el reto seleccionado en un control webBrowser en la página.

Añadimos el control a la página y después dependiendo del valor del parámetro cambiaremos la propiedad Source del control para que navegue a una página u otra.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    string numeroReto = "";
    if (NavigationContext.QueryString.TryGetValue("reto", out numeroReto))
    {
        if (numeroReto == "0")
            webBrowser1.Source = new Uri(
            "https://blogs.msdn.com/b/esmsdn/archive/2011/07/18/reto-windows-azure-almacenamiento-en-tablas-
            no-relacionales.aspx");
        if (numeroReto == "1")
            webBrowser1.Source = new Uri(
            "https://blogs.msdn.com/b/esmsdn/archive/2011/07/20/reto-kinect-usar-las-c-225-maras-del-sensor.aspx");
        if (numeroReto == "2")
            webBrowser1.Source = new Uri(
            "https://blogs.msdn.com/b/esmsdn/archive/2011/07/22/reto-windows-phone-navegar-por-tu-aplicaci-
            243-n.aspx");
        if (numeroReto == "3")
            webBrowser1.Source = new Uri(
            "https://blogs.msdn.com/b/esmsdn/archive/2011/07/13/reto-html5-primeros-pasos-con-html5.aspx");
    }
}

Con todo esto ya tenemos el sistema de navegación que teníamos que crear en el reto propuesto.

Solución Reto Windows Phone: Navegar por tu aplicación

Crear las páginas

Navegar de la página principal a Saludo.xaml

Recibir datos en la página

Mostrar el reto elegido

Recursos adicionales