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

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

Parte I

Parte III

Navegación entre páginas de una aplicación – Introducción (II)

Agregando funcionalidad a la página principal

Lo primero que vamos a hacer es agregar algo de funcionalidad a la página principal.

Lo más típico es agregar algún tipo de control al formulario principal y la posibilidad de abrir la segunda página Prueba.xaml desde esta página.

Para ese fin, vamos a hacer doble clic sobre MainPage.xaml con el fin de que se abra esta página en nuestro diseñador.

Una vez hecho esto, vamos a agregar en esta página, un control TextBlock, un control TextBox, y un control Button.

El objetivo es que escribamos algo en la caja de texto (control TextBox), y al pulsar el control Button, vayamos a la página Prueba.xaml y mostremos en esa página el texto escrito en la caja de texto. Algo simple y sencillo como podemos ver.

El código XAML de esta página (MainPage.xaml) es el que se puede ver a continuación:

   1: <Page

   2:     x:Class="Sample1.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:Sample1"

   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="{StaticResource ApplicationPageBackgroundThemeBrush}">

  12:         <TextBlock HorizontalAlignment="Left" Margin="20,40,0,0" TextWrapping="Wrap" 

  13:                    Text="Escriba su nombre:" VerticalAlignment="Top" FontSize="24" />

  14:         <TextBox HorizontalAlignment="Left" Margin="240,40,0,0" TextWrapping="Wrap" 

  15:                  Text="" VerticalAlignment="Top" Width="300" />

  16:         <Button Content="Saludar" HorizontalAlignment="Left" Margin="20,90,0,0" 

  17:                 VerticalAlignment="Top" BorderThickness="1" FontSize="20" 

  18:                 Foreground="LightBlue" BorderBrush="Beige" />

  19:     </Grid>

  20: </Page>

Si ejecutamos nuestra aplicación, observaremos que aún no hemos cargado la página Prueba.xaml ni hemos realizado ninguna acción concreta.

Antes de esto, vamos a preparar nuestra página Prueba.xaml.

Preparando nuestra página secundaria

Nuestra página secundaria, Prueba.xaml, tendrá un aspecto similar al que se presenta en la siguiente imagen:

Por esta razón, lo primero que vamos a hacer es cambiar el texto que aparece en el título de nuestra página.

Para ello, vamos a buscar un control de tipo TextBlock que tiene la propiedad Name como pageTitle, y vamos a cambiar su propiedad Text a Prueba. Servirá cualquier nombre, pero quiero poner este para que veamos claramente que se carga la segunda página de nuestro proyecto.

Para completar nuestra aplicación y puesto que cuando pulsemos el botón de nuestra primera página y página principal, MainPage.xaml, queremos que nos muestre un texto, vamos a agregar además un control TextBlock para que haga la función de mostrar ese texto.

Para ello, escribiremos el siguiente código XAML.

   1: <StackPanel Grid.Row="1" Margin="120,20,20,20">

   2:     <TextBlock HorizontalAlignment="Left" Name="txtSaludo" Text="" FontSize="24" />

   3: </StackPanel>

Cabe descacar que de acuerdo a la página que hemos creado y por defecto en su creación, ésta tiene un Grid que actúa como panel principal en el que se encuentran dos filas.

La primera de esas filas está reservada para el botón de retroceso y que nos llevará a la página que ha llamado a esta y que en nuestro caso será MainPage.xaml, y una segunda segunda fila que contendrá el resto de la página que es donde hemos querido insertar nuestros controles.

Esto lo logramos utilizando la instrucción XAML Grid.Row="número_de_fila".

Volvamos nuevamente a nuestra página principal MainPage.xaml.

Agregando eventos a la página principal

Nos hemos centrado bastante en el diseño de nuestras dos páginas, sin embargo y para que haya funcionalidad, debemos hacer aún algunos pequeños ajustes.

Por un lado, la caja de texto o control TextBox de la página MainPage.xaml no posee ningún nonbre. Dicho de otra forma, cuando queramos hacer referencia a este objeto o control, no tendremos forma de hacerlo, por lo que agregaremos al código XAML una propiedad Name.

El código de nuestro control TextBox para nuestra página XAML MainPage.xaml de la siguiente manera.

   1: <TextBox x:Name="txtNombre" HorizontalAlignment="Left" Margin="240,40,0,0" 

   2:          TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="300" />

En otro orden de cosas, nuestro control Button no tiene asociado ningún evento.

Lo que queremos, es que al hacer clic sobre el botón, éste llame y cargue la página Prueba.xaml que hemos creado.

Para ello, vamos a hacer un clic sobre el control Button del código XAML, y vamos a acudir a la ventana de Propiedades.

Dentro de esta ventana, vamos a situarnos en los eventos del control (el icono que simula un rayo) y vamos a hacer doble clic sobre la caja de texto a la derecha de Click.

De esta forma, agregaremos un evento Click asociado a nuestro control Button, de tal manera que al hacer clic sobre el botón, carguemos la página Prueba.xaml que es el objetivo buscado.

Una vez hecho esto, se abrirá el código asociado a nuestro código XAML, es decir, para MainPage.xaml, el fichero de código C# MainPage.xaml.cs.

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

   2: {

   3: }

Nota adicional: Como acabamos de hacer diferentes acciones como agregar un nombre a los controles y un evento, antes de continuar se recomienda compilar la aplicación para que los ajustes y cambios estén bien acoplados a la aplicación.

Bien, llegados a este punto, ha llegado el momento de programar nuestro evento Click sobre el control Button.

Programando el evento del control Button de nuestra página principal

¿Qué queremos hacer?.

Sencillamente, que al hacer clic sobre el control Button, llamemos a la página Prueba.xaml.

Sin embargo, debemos tener en cuenta algunos detalles.

Un detalle funcional de nuestro ejemplo que no obligado, es obligar a que en la caja de texto o control TextBox, tengamos algo de texto. En caso contrario, impediremos la llamada y consiguiente carga de la página Prueba.xaml.

El segundo de los detalles y de carácter funcional puro, es que cuando llamemos a la página Prueba.xaml, lo hagamos porque la caja de texto o control TextBox posee un texto, y que ese texto viaje a dicha ventana y nos lo muestre, de forma que cerremos el círculo de navegación entre una página y otra.

Para llevar a cabo ambas operaciones, vamos a escribir el siguiente código fuente en C# asociado con el evento Click del control Button.

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

   2: {

   3:     if (string.IsNullOrWhiteSpace(this.txtNombre.Text))

   4:     {

   5:         Windows.UI.Popups.MessageDialog messageDialog = new Windows.UI.Popups.MessageDialog(

   6:                                                                     "Debe escribir un nombre válido.",

   7:                                                                     "Sample 1");

   8:         var response = messageDialog.ShowAsync();

   9:     }

  10:     else

  11:     {

  12:         this.Frame.Navigate(typeof(Prueba), this.txtNombre.Text);

  13:     }

  14: } // Button_Click_1

Si ejecutamos nuestra aplicación, observaremos que nuestra aplicación trabajar de momento, tal y como queremos.

Observando el código de la llamada, vemos que además de llamar a la página Prueba u tilizando el método Navigate, le estamos indicando el texto de nuestro control TextBox.

this.Frame.Navigate(typeof(Prueba), this.txtNombre.Text);

Sin embargo, nuestra página Prueba.xaml aún no es consciente de que la estamos indicando nada (concretamente y en nuestro caso, el contenido de nuestro control TextBox en nuestra página principal MainPage.xaml).

(…Continúa…)