Desarrollo de Windows 10: navegación

En las aplicaciones de la Plataforma universal de Windows (UWP), la navegación es un modelo flexible de estructuras de navegación, elementos de navegación y características de nivel del sistema. Permite una variedad de experiencias de usuario intuitivas para moverse entre aplicaciones, páginas y contenido.

Hay algunas situaciones y escenarios en los que todo el contenido y la funcionalidad pueden caber fácilmente en una sola página y no es necesario que los desarrolladores creen varias páginas. Sin embargo, en la mayoría de las aplicaciones, se utilizan varias páginas para la interacción entre diferentes contenidos y funcionalidades.

Cuando una aplicación tiene más de una página, es muy importante que los desarrolladores proporcionen la experiencia de navegación adecuada.

Modelos de página

Normalmente, en las aplicaciones de la Plataforma universal de Windows (UWP), se utiliza el modelo de navegación de una sola página.

Las características importantes son:

  • Un modelo de navegación de una sola página mantiene todo el contexto de su aplicación y el contenido y los datos adicionales en un marco central.

  • Puede dividir el contenido de su aplicación en varias páginas. Sin embargo, al pasar de una página a otra, su aplicación carga las páginas en un formulario de página principal.

  • Ni la página principal de su aplicación se descarga ni el código y los datos se descargan, facilita la administración del estado y proporciona animaciones de transición más fluidas entre páginas.

La navegación de varias páginas también se utiliza para navegar entre diferentes páginas o pantallas sin preocuparse por el contexto de la aplicación. En la navegación de varias páginas, cada página tiene su propio conjunto de funciones, interfaz de usuario y datos, etc.

La navegación de varias páginas se utiliza normalmente en páginas web dentro del sitio web.

Estructura de navegación

En la navegación de varias páginas, cada página tiene su propio conjunto de funciones, interfaz de usuario y datos, etc. Por ejemplo, una aplicación de fotos puede tener una página para capturar fotos, luego, cuando el usuario quiere editar la foto, navega a otra página. y para mantener la biblioteca de imágenes, tiene otra página.

La estructura de navegación de su aplicación está definida por cómo están organizadas estas páginas.

A continuación se muestran las formas de estructurar la navegación en su aplicación:

Jerarquía

En este tipo de estructuración de navegación,

  • Las páginas están organizadas en una estructura en forma de árbol.

  • Cada página secundaria tiene solo un padre, pero un padre puede tener una o más páginas secundarias.

  • Para llegar a una página secundaria, debe viajar a través de la página principal.

Mirar

En este tipo de navegación -

  • Las páginas existen una al lado de la otra.
  • Puede pasar de una página a otra en cualquier orden.

En la mayoría de las aplicaciones de varias páginas, ambas estructuras se utilizan simultáneamente. Algunas de las páginas están organizadas como pares y algunas de ellas están organizadas en jerarquías.

Tomemos un ejemplo que contiene tres páginas.

  • Cree una aplicación para UWP en blanco con el nombre UWPNavigation.

  • Agregue dos páginas en blanco más haciendo clic derecho en el proyecto en Solution Explorer y seleccione Add > New Item opción del menú, que abrirá la siguiente ventana de diálogo.

  • Seleccione la página en blanco del panel central y haga clic en el Add botón.

  • Ahora agregue una página más siguiendo los pasos dados anteriormente.

Verá tres páginas en el Explorador de soluciones: MainPage, BlankPage1y BlankPage2.

A continuación se muestra el código XAML para MainPage en el que se agregan dos botones.

<Page 
   x:Class = "UWPNavigation.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Hub Header = "Hi, this Main Page"/> 
      <Button Content = "Go to Page 1" Margin = "64,131,0,477" Click = "Button_Click"/>
      <Button Content = "Go to Page 2" Margin = "64,210,0,398" Click = "Button_Click_1"/> 
   </Grid> 
	
</Page>

A continuación se muestra el código C # para dos botones en MainPage, que navegará a las otras dos páginas.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls;
  
// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void Button_Click(object sender, RoutedEventArgs e){ 
         this.Frame.Navigate(typeof(BlankPage1)); 
      } 
		
      private void Button_Click_1(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(BlankPage2)); 
      } 
		
   } 
}

El código XAML para blank page 1 se muestra a continuación.

<Page 
   x:Class = "UWPNavigation.BlankPage1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Hub Header = "Hi, this is page 1"/> 
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

Código C # para el botón: haga clic en el evento en blank page 1, que navegará a la página principal se muestra a continuación.

using System; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=234238 
	
namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class BlankPage1 : Page {
    
      public BlankPage1() {
         this.InitializeComponent(); 
      }
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

A continuación se muestra el código XAML para blank page 2.

<Page 
   x:Class = "UWPNavigation.BlankPage2" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPNavigation" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <Hub Header = "Hi, this is page 2"/>
      <Button Content = "Go to Main Page" Margin = "64,94,0,514" Click = "Button_Click"/> 
   </Grid> 
	
</Page>

A continuación se muestra el código C # para el evento de clic de botón en blank page 2, que navegará a la página principal.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at  
   http://go.microsoft.com/fwlink/?LinkId=234238
	
namespace UWPNavigation {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
	
   public sealed partial class BlankPage2 : Page {
   
      public BlankPage2(){ 
         this.InitializeComponent(); 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         this.Frame.Navigate(typeof(MainPage)); 
      }
		
   } 
}

Cuando se compile y ejecute el código anterior, verá la siguiente ventana.

Cuando haga clic en cualquier botón, lo llevará a la página correspondiente. Hagamos clic enGo to Page 1 y se mostrará la siguiente página.

Cuando haces clic en el botón 'Go to Main Page', volverá a la página principal.