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.