Sviluppo di Windows 10 - Navigazione

Nelle applicazioni UWP (Universal Windows Platform), la navigazione è un modello flessibile di strutture di navigazione, elementi di navigazione e funzionalità a livello di sistema. Consente una varietà di esperienze utente intuitive per spostarsi tra app, pagine e contenuti.

Esistono alcune situazioni e scenari in cui tutto il contenuto e le funzionalità possono essere facilmente inseriti in una singola pagina e non è necessario che gli sviluppatori creino più pagine. Tuttavia, nella maggior parte delle applicazioni, vengono utilizzate più pagine per l'interazione tra contenuti e funzionalità differenti.

Quando un'app ha più di una pagina, è molto importante che gli sviluppatori forniscano la giusta esperienza di navigazione.

Modelli di pagina

In genere, nelle applicazioni UWP (Universal Windows Platform), viene utilizzato il modello di navigazione a pagina singola.

Le caratteristiche importanti sono:

  • Un modello di navigazione a pagina singola mantiene tutto il contesto della tua applicazione e contenuti e dati aggiuntivi in ​​un frame centrale.

  • Puoi dividere il contenuto della tua applicazione in più pagine. Tuttavia, quando ci si sposta da una pagina all'altra, l'applicazione carica le pagine in un modulo della pagina principale.

  • Né la pagina principale dell'applicazione viene scaricata né il codice ei dati vengono scaricati, semplifica la gestione dello stato e fornisce animazioni di transizione più fluide tra le pagine.

La navigazione multipagina viene utilizzata anche per navigare tra diverse pagine o schermate senza preoccuparsi del contesto dell'applicazione. Nella navigazione multi-pagina, ogni pagina ha il proprio insieme di funzioni, interfaccia utente e dati, ecc.

La navigazione multipagina viene generalmente utilizzata nelle pagine web del sito web.

Struttura di navigazione

Nella navigazione multipagina, ogni pagina ha il proprio insieme di funzioni, interfaccia utente e dati ecc. Ad esempio, un'applicazione fotografica può avere una pagina per catturare foto, quindi quando l'utente desidera modificare la foto, passa a un'altra pagina e per mantenere la libreria di immagini, ha un'altra pagina.

La struttura di navigazione della tua applicazione è definita da come sono organizzate queste pagine.

Di seguito sono riportati i modi per strutturare la navigazione nella tua applicazione:

Gerarchia

In questo tipo di strutturazione della navigazione,

  • Le pagine sono organizzate in una struttura ad albero.

  • Ogni pagina figlio ha un solo genitore, ma un genitore può avere una o più pagine figlio.

  • Per raggiungere una pagina figlio, devi viaggiare attraverso il genitore.

Peer

In questo tipo di navigazione -

  • Le pagine esistono fianco a fianco.
  • Puoi passare da una pagina all'altra in qualsiasi ordine.

Nella maggior parte delle applicazioni multipagina, entrambe le strutture vengono utilizzate contemporaneamente. Alcune pagine sono organizzate come peer e alcune di esse sono organizzate in gerarchie.

Prendiamo un esempio che contiene tre pagine.

  • Crea un'applicazione UWP vuota con il nome UWPNavigation.

  • Aggiungi altre due pagine vuote facendo clic con il pulsante destro del mouse sul progetto in Solution Explorer e seleziona Add > New Item opzione dal menu, che aprirà la seguente finestra di dialogo.

  • Seleziona la pagina vuota dal riquadro centrale e fai clic su Add pulsante.

  • Ora aggiungi un'altra pagina seguendo i passaggi sopra indicati.

Vedrai tre pagine in Esplora soluzioni: MainPage, BlankPage1, e BlankPage2.

Di seguito è riportato il codice XAML per MainPage in cui vengono aggiunti due pulsanti.

<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>

Di seguito è riportato il codice C # per due pulsanti MainPage, che passerà alle altre due pagine.

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)); 
      } 
		
   } 
}

Il codice XAML per blank page 1 è mostrato sotto.

<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>

Codice C # per il pulsante: fare clic sull'evento blank page 1, che porterà alla pagina principale è mostrato di seguito.

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)); 
      }
		
   } 
}

Di seguito è riportato il codice XAML per 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>

Di seguito è riportato il codice C # per l'evento clic sul pulsante blank page 2, che porterà alla pagina principale.

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)); 
      }
		
   } 
}

Quando il codice sopra è stato compilato ed eseguito, vedrai la seguente finestra.

Quando fai clic su qualsiasi pulsante, ti porterà alla rispettiva pagina. Facci clic suGo to Page 1 e verrà visualizzata la pagina seguente.

Quando fai clic sul pulsante 'Go to Main Page', tornerà alla pagina principale.