Operaciones básicas de programación con Metro y Windows 8 (VI)

Navegación entre páginas de una aplicación – Avanzado

Parte I

Parte II

Parte IV

Navegación entre páginas de una aplicación – Avanzado (III)

Agregando imágenes a nuestro proyecto

Las imágenes de nuestra aplicación las podemos situar donde consideremos oportuno, pero lo más obvio y rápido es situarla en la carpeta Images.

En el Explorador de Soluciones, encontrará un botón que indica Show All Files.

Esta opción nos permite ver los archivos visibles en el proyecto y los que no son visibles (porque no se han cargado) en el mismo.

En mi carpeta Images he colocado una imagen por cada planeta, por lo que haciendo clic sobre Show All Files, me he situado sobre la carpeta Images y he pulsado el botón derecho del ratón sobre cada imagen y he elegido la opción Include in Project para incluirlas en el proyecto.

Preparando la página principal

Nos hemos centrado bastante en la página secundaria y en las clases que utilizaremos para cargar datos, pero aún no nos hemos detenido en la página principal.

Para nuestra página principal, he querido agregar una imagen lateral en el lado izquierdo con los diferentes planetas del sistema solar, a modo de imagen genérica para darle un aspecto menos tosco a nuestra aplicación.

Además, he agregado un control HyperlinkButton para que al pulsar sobre él, podamos ir a la página secundaria BasicPage.xaml.

También he agregado un control Button para que al hacer clic sobre él, cerremos la aplicación.

Y para finalizar, he agregado un control Image que mostrará la imagen del planeta seleccionado en la página secundaria, y dos controles TextBlock para mostrar los datos del planeta seleccionado.

Nuestra ventana quedará de la siguiente manera.

Y el código XAML asociado a MainPage.xaml corresponderá con el siguiente código.

   1: <Page

   2:     x:Class="Sample2.MainPage"

   3:     IsTabStop="false"

   4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   6:     xmlns:local="using:Sample2"

   7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   9:     mc:Ignorable="d">

  10:  

  11:     <Grid Background="Black">

  12:         <Image HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" 

  13:                Source="ms-appx:///Images/Planetas_Sistema_Solar.png" Height="598" Width="202" />

  14:         <Canvas>

  15:             <HyperlinkButton Margin="300,100,0,0" Content="Seleccione un planeta del Sistema Solar" 

  16:                              Foreground="DarkGoldenrod" FontSize="20" Click="HyperlinkButton_Click_1" />

  17:             <Button x:Name="btnSalir" Content="Volver a casa" Canvas.Left="40" Canvas.Top="620" 

  18:                     FontSize="16" BorderThickness="1" Background="Black" BorderBrush="BlueViolet" 

  19:                     Foreground="DarkSlateBlue" Click="btnSalir_Click_1" />

  20:             <Image x:Name="imgPlaneta" Height="200" Canvas.Left="400" Canvas.Top="220" Width="200" />

  21:             <TextBlock x:Name="tbNombrePlaneta" Canvas.Top="440" Canvas.Left="400" 

  22:                        Foreground="DarkOrange" FontSize="24" />

  23:             <TextBlock x:Name="tbDiametroPlaneta" Canvas.Top="480" Canvas.Left="400" 

  24:                        Foreground="Orange" FontSize="20" />

  25:         </Canvas>

  26:     </Grid>

  27: </Page>

Programando la página principal

Una vez que hemos preparado la interfaz de usuario en ambas páginas y que hemos preparado las clases en las que vamos a cargar los datos, vamos a escribir el código de la página principal.

En primer lugar nos centraremos en el constructor de la clase MainPage.xaml.

Con el fin de que accedamos a los datos de la página que teníamos cargados al regresar a nuestra página, debemos cachear la instancia de nuestra página.

Para ello, utilizaremos la siguiente instrucción:

   1: this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

Nuestro constructor quedará por lo tanto de la siguiente forma:

   1: /// <summary>

   2: /// Constructor de la clase.

   3: /// </summary>

   4: public MainPage()

   5: {

   6:     this.InitializeComponent();

   7:     // Habilitamos la caché.

   8:     this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

   9: } // MainPage Constructor

A continuación, vamos a preparar los eventos de los dos controles de la página principal, el del control Button y el del control HyperlinkButton.

El código de estos dos eventos quedarán de la siguiente manera:

   1: private void btnSalir_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     // Cerramos la aplicación.

   4:     Application.Current.Exit();

   5: } // btnSalir_Click_1

   6:  

   7: private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)

   8: {

   9:     // Navegamos a la página BasicPage1.

  10:     this.Frame.Navigate(typeof(BasicPage1));

  11: } // HyperlinkButton_Click_1

Nota: Aunque aquí me he sacado de la chistera el botón de cerrar la aplicación, esto en Metro no está permitido, y nuestra aplicación no pasaría la validación del Store de Windows 8. Ojo con esto.

El último evento a tener en cuenta es el evento OnNavigatedTo de la página.

(…Continúa…)