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.