Windows Phone –Tutorial IV Navegación

En esta entrada vamos a tratar la navegación entre paginas (controles) en Windows Phone, este tema es bien sencillo ya que utiliza la misma forma que Silverlight 3 a través de la clase NavigationService como siempre vamos a realizarlo a través de un ejemplo. Para ello creamos una aplicación como en los anteriores ejemplos.

En esta aplicación vamos a crear dos paginas en el proyecto y vamos a navegar de una a otra, primero aprenderemos sin pasar datos y luego pasando datos de una pagina a otra.

image image

Una vez que tenemos nuestra aplicación con las dos paginas (Main y Page 2) vamos a crear la primera pagina que va a tener un TextBox y un botón con el texto “Siguiente Página”. En la segunda pagina tendremos un TextBlock que recogerá el parámetro enviado por la primera página y un botón que nos devolverá a la página anterior.

 

1 <Grid x:Name="LayoutRoot" Background="Transparent"> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="Auto"/> 4 <RowDefinition Height="*"/> 5 </Grid.RowDefinitions> 6 7 <!--TitlePanel contains the name of the application and page title--> 8 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 9 <TextBlock x:Name="ApplicationTitle" Text="Navegación" Style="{StaticResource PhoneTextNormalStyle}"/> 10 <TextBlock x:Name="PageTitle" Text="Pagina 1" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 11 </StackPanel> 12 13 <!--ContentPanel - place additional content here--> 14 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 15 <TextBox Height="74" HorizontalAlignment="Left" Margin="26,41,0,0" Name="txtText" Text="" VerticalAlignment="Top" Width="398" /> 16 <Button Content="Siguiente Página" Height="82" HorizontalAlignment="Left" Margin="88,143,0,0" Name="btnNext" VerticalAlignment="Top" Width="259" /> 17 </Grid> 18 </Grid> 19

Segunda Página

 

1 <Grid x:Name="LayoutRoot" Background="Transparent"> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="Auto"/> 4 <RowDefinition Height="*"/> 5 </Grid.RowDefinitions> 6 7 <!--TitlePanel contains the name of the application and page title--> 8 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 9 <TextBlock x:Name="ApplicationTitle" Text="Navegación" Style="{StaticResource PhoneTextNormalStyle}"/> 10 <TextBlock x:Name="PageTitle" Text="Pagina 2" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 11 </StackPanel> 12 13 <!--ContentPanel - place additional content here--> 14 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 15 <TextBlock Height="49" HorizontalAlignment="Left" Margin="46,38,0,0" Name="txtData" Text="Sin Datos.." VerticalAlignment="Top" Width="370" /> 16 <Button Content="Página Anterior" Height="93" HorizontalAlignment="Left" Margin="113,128,0,0" Name="btnBack" VerticalAlignment="Top" Width="216" /> 17 </Grid> 18 </Grid> 19

En la primera página en el evento click del botón utilizaremos el método:

Navigate:  Solo hay que pasarle como argumento los siguientes parámetros:

  • Objeto URI, con la dirección de la página deseada. Recordemos que los objetos de tipo página se referencian con la URI (Unique Resource Identifier), del cual, por ejemplo, la URL es sólo un subtipo de URI. 
  • Tipo de referencia URI, puede ser relativa, absoluta, o desconocida. En este caso, como regla nemotécnica, nos puede ayudar el pensar que esto está “relativizado” a la aplicación y no a un sitio web. Si la dirección de la página empieza con una barra, tendrá como referencia no el root del filesystem, sino la raíz de la aplicación, y será una dirección relativa.

 

1 void btnNext_Click(object sender, RoutedEventArgs e) 2 { 3 NavigationService.Navigate(new Uri("/page2.xaml", UriKind.Relative)); 4 } 5

En la segunda página para volver a la anterior utilizaremos el método GoBack(), donde es la propia aplicación la que determina la secuencia de navegación a través de su registro de historial.

1 void btnBack_Click(object sender, RoutedEventArgs e) 2 { 3 NavigationService.GoBack(); 4 } 5

 

Si ejecutamos ahora la aplicación veremos como funciona correctamente la navegación, pero como pasamos datos de una página a otra?, bien sencillo a través de unos de estos métodos

  • Pasar los parámetros como cadenas de consulta (querystring) en la dirección de la página receptora. Esto es estándar HTTP.
  • Pasar parámetros al constructor de la nueva página. Para ello, debemos alterar la definición de la página receptora de los parámetros, modificando su constructor para que acepte parámetros.

1 – QueryString

Este método es bien sencillo es el estándar HTTP.

1 void btnNext_Click(object sender, RoutedEventArgs e) 2 { 3 string url = "/page2.xaml?text=" + txtText.Text; 4 NavigationService.Navigate(new Uri(url, UriKind.Relative)); 5 }

 

Para recoger el texto en la pagina 2 utilizaremos el método QueryString

 

1 public Page2() 2 { 3 InitializeComponent(); 4 Loaded += new RoutedEventHandler(Page2_Loaded); 5 btnBack.Click += new RoutedEventHandler(btnBack_Click); 6 } 7 8 void Page2_Loaded(object sender, RoutedEventArgs e) 9 { 10 string text = NavigationContext.QueryString["text"]; 11 txtData.Text = text; 12 } 13 14 void btnBack_Click(object sender, RoutedEventArgs e) 15 { 16 NavigationService.GoBack(); 17 }

Para recoger los parámetros pasados por querystring utilizaremos la clase NavigationContext

2-Constructor

Vamos a crear una clase mus sencilla con una propiedad

 

1 public class ParameterData 2 { 3 public string ParameterText { get; set; } 4 } 5

En la pagina a recibir modificamos el constructor para que tenga como parámetro una instancia de la clase anterior

1 public Page2(ParameterData data) 2 { 3 InitializeComponent(); 4 if (data != null) 5 txtData.Text = data.ParameterText; 6 btnBack.Click += new RoutedEventHandler(btnBack_Click); 7 }

 

Lo que tendremos que utilizar en este caso es el objeto RootVisual que es la  página XAML actual.

1 void btnNext_Click(object sender, RoutedEventArgs e) 2 { 3 ParameterData data = new ParameterData(); 4 data.ParameterText = txtText.Text; 5 App.Current.RootVisual = new Page2(data); 6 } 7

Lo que no nos funcionara en este caso es el método GoBack para regresar a la anterior, deberemos utilizar el método anterior, esto ocurre porque el Journaling (historial de navegación) no registrará la navegación. Para evitar excepciones en el método GoBack  deberíamos utilizar la propiedad canGoBack de la clase NavigationService

Os dejo el código

 

Download File – Navigation

3 comentarios en “Windows Phone –Tutorial IV Navegación”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *