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.
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
En el anterior articulo vimos como se podía realizar la navegación entre páginas en un wp7, en el comienzo
Hola esto me podria servir para pasar clases enteras atraves de paginas??? y masomenos como podria ser
Si te sertviria el segundo metodo a traves del constructor, pero yo te recomendaria utilizar el MVVM y pasar los datos a través de mensajes, lo tienes en el siguiente articulo
http://geeks.ms/blogs/oalvarez/archive/2010/12/04/windows-phone-tutorial-navegaci-243-n-con-mvvm-light-toolkit.aspx