Operaciones básicas de programación con Metro y Windows 8 (IV)
Navegación entre páginas de una aplicación – Avanzado
Navegación entre páginas de una aplicación – Avanzado (I)
Introducción
Otro de los aspectos que debemos controlar a la hora de desarrollar aplicaciones en Windows 8 con Metro es la capacidad o posibilidad que tenemos los programadores a la hora de jugar con los datos de ida y vuelta.
A continuación, vamos a ver como recargar datos entre páginas y como tratarlos.
Nota: Para este capítulo y sus subcapítulos, se entiende que el lector ya tiene algún conocimiento de Visual Studio 2012 y que para ello ha leído y comprendido la anterior entrada "Navegación entre páginas de una aplicación – Introducción" o cualquier otra documentación similar de Internet.
Objetivo del ejemplo
El objetivo de este ejemplo es el de preparar una página principal de aplicación y una página secundaria.
En la página secundaria tendremos una colección de planetas que tendrá entre otros datos, su nombre, su diámetro y la ruta de la imagen del planeta seleccionado para mostrarla en la página principal.
Cuando regresemos de esa página secundaria a la página principal, cargaremos en ésta los datos del planeta seleccionado y su imagen como decía anteriormente.
Parece sencillo ¿verdad?.
Pues vamos a ello.
Preparando la aplicación
Iniciaremos un nuevo proyecto con Visual Studio 2012 con las plantillas de Windows Metro style y en concreto utilizando una plantilla vacía (Blank App (XAML)) en C#.
Como nombre de proyecto, Sample2.
Esta plantilla habrá creado una página de nombre MainPage.xaml.
La siguiente acción que realizaremos será la de agregar una nueva página de tipo básica a la aplicación, agregando para ello una página de tipo Basic Page.
Nota: Repase el capítulo de introducción que anteriormente se comentó si tiene alguna duda para crear el proyecto.
Como nombre de la nueva página que queremos añadir, elegiremos el nombre que Visual Studio 2012 nos recomienda por defecto, y que es BasicPage1.xaml.
Es posible que aparezca un mensaje de aviso. Si ocurre así, responderemos afirmativamente.
Una vez hecho esto, vamos a compilar nuestra solución, y acto seguido vamos a situarnos en el código XAML de la página que acabamos de crear, es decir, en el fichero BasicPage1.xaml.
Recordemos que en el Explorador de Soluciones tendremos algo similar a lo que se indica en la siguiente imagen.
Centrándonos en el código XAML de BasicPage1.xaml, vamos a buscar el control TextBlock con el nombre pageTitle, y vamos a cambiar su propiedad Text a "Seleccione un planeta".
A continuación, agregaremos a la página BasicPage1.xaml, un control TextBlock y un control ComboBox.
El control TextBlock lo utilizaremos para mostrar un texto genérico que en nuestro caso es "Listado de planetas:".
El control ComboBox lo utilizaremos para agregar en dicho control, una lista de planetas que habremos cargado previamente simulando una carga de datos sobre este control.
El aspecto de nuestra página BasicPage1.xaml será similar al siguiente:
El código XAML asociado a la página será similar al siguiente:
1: <common:LayoutAwarePage
2: x:Name="pageRoot"
3: x:Class="Sample2.BasicPage1"
4: DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
5: IsTabStop="false"
6: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
7: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
8: xmlns:local="using:Sample2"
9: xmlns:common="using:Sample2.Common"
10: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
11: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
12: mc:Ignorable="d">
13:
14: <Page.Resources>
15: <x:String x:Key="AppName">My Application</x:String>
16: </Page.Resources>
17:
18: <Grid Style="{StaticResource LayoutRootStyle}">
19: <Grid.RowDefinitions>
20: <RowDefinition Height="140"/>
21: <RowDefinition Height="*"/>
22: </Grid.RowDefinitions>
23:
24: <Grid>
25: <Grid.ColumnDefinitions>
26: <ColumnDefinition Width="Auto"/>
27: <ColumnDefinition Width="*"/>
28: </Grid.ColumnDefinitions>
29: <Button x:Name="backButton" Click="GoBack"
30: IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
31: Style="{StaticResource BackButtonStyle}"/>
32: <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Seleccione un planeta"
33: Style="{StaticResource PageHeaderTextStyle}"/>
34: </Grid>
35: <TextBlock HorizontalAlignment="Left" Margin="60,40,0,0" Grid.Row="1"
36: TextWrapping="Wrap" Text="Listado de planetas:" VerticalAlignment="Top"
37: FontSize="20" Foreground="LightCyan" />
38: <ComboBox x:Name="cboPlanetas" HorizontalAlignment="Left" Margin="60,80,0,0"
39: Grid.Row="1" VerticalAlignment="Top" Width="180" FontSize="16"
40: SelectionChanged="cboPlanetas_SelectionChanged_1" ItemsSource="{Binding}" />
41:
42: <VisualStateManager.VisualStateGroups>
43:
44: <VisualStateGroup x:Name="ApplicationViewStates">
45: <VisualState x:Name="FullScreenLandscape"/>
46: <VisualState x:Name="Filled"/>
47:
48: <VisualState x:Name="FullScreenPortrait">
49: <Storyboard>
50: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
51: Storyboard.TargetProperty="Style">
52: <DiscreteObjectKeyFrame KeyTime="0"
53: Value="{StaticResource PortraitBackButtonStyle}"/>
54: </ObjectAnimationUsingKeyFrames>
55: </Storyboard>
56: </VisualState>
57:
58: <VisualState x:Name="Snapped">
59: <Storyboard>
60: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
61: Storyboard.TargetProperty="Style">
62: <DiscreteObjectKeyFrame KeyTime="0"
63: Value="{StaticResource SnappedBackButtonStyle}"/>
64: </ObjectAnimationUsingKeyFrames>
65: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
66: Storyboard.TargetProperty="Style">
67: <DiscreteObjectKeyFrame KeyTime="0"
68: Value="{StaticResource SnappedPageHeaderTextStyle}"/>
69: </ObjectAnimationUsingKeyFrames>
70: </Storyboard>
71: </VisualState>
72: </VisualStateGroup>
73: </VisualStateManager.VisualStateGroups>
74: </Grid>
75: </common:LayoutAwarePage>
(…Continúa…)
