Windows Dev Center

Linguaggio: HTML | XAML

Guida introduttiva: Spostamento tra le pagine (XAML)

Questo argomento illustra i concetti di base della navigazione e spiega come creare un'app che naviga tra due pagine.

Per informazioni su come scegliere il modello di navigazione migliore per la tua app, vedi Modelli di esplorazione.

Per vedere come funzionano i modelli di navigazione semplice e navigazione gerarchica, leggi i relativi argomenti inclusi nella serie Funzionalità delle app dall'inizio alla fine.

Roadmap: che relazione c'è tra questo argomento e gli altri? Vedi:

Puoi creare più pagine per la tua app e supportare la navigazione dell'utente tra le pagine all'interno dell'app, in modo analogo alla navigazione tra le pagine di un sito Web. Microsoft Visual Studio include modelli di pagina che offrono un supporto di base alla navigazione per le app di Windows Runtime scritte in C# o Microsoft Visual Basic. In questo argomento usiamo i modelli di pagina per creare una semplice app che supporti la navigazione.

Nota  

Quando si parla di navigazione per le app di Windows Runtime, si fa riferimento alla navigazione tra le pagine di un'app, non tra le app.

Prerequisiti

In questo argomento partiamo dal presupposto che tu sappia come creare una semplice app di Windows Runtime in C# o Visual Basic. Per istruzioni sulla creazione della tua prima app di Windows Runtime, vedi Creare la prima app di Windows Runtime in C# o Visual Basic.

Creazione dell'app di navigazione

Hh771188.wedge(it-it,WIN.10).gifCreazione dell'app vuota

  1. Scegli File > Nuovo progetto dal menu di Visual Studio.
  2. Nel riquadro sinistro della finestra di dialogo Nuovo progetto seleziona il nodo Visual C#, Visual Basic o Visual C++.
  3. Nel riquadro centrale seleziona Applicazione vuota.
  4. Nella casella Nome immetti BlankApp e quindi scegli il pulsante OK.

    La soluzione viene creata e i file del progetto vengono visualizzati in Esplora soluzioni. Per altre info sui file di progetto, vedi Modelli di progetto C#, VB e C++ per le app di Windows Runtime.

    Importante  Alla prima esecuzione di Visual Studio, ti verrà richiesto di ottenere una licenza per sviluppatori. Per altre informazioni, vedi Ottenere una licenza per sviluppatori.
  5. Per eseguire il programma, scegli Debug > Avvia debug dal menu di Visual Studio oppure premi F5.

    Viene visualizzata una pagina vuota.

  6. Premi MAIUSC+F5 per arrestare il debug e tornare a Visual Studio.

Aggiungi quindi due pagine al progetto. Sono le pagine tra cui navigheremo. Esegui due volte la procedura seguente per aggiungere due pagine.

Hh771188.wedge(it-it,WIN.10).gifAggiunta della pagina base

  1. In Esplora soluzioni, apri il menu di scelta rapida del nodo del progetto BlankApp e quindi scegli Aggiungi > Nuovo elemento.
  2. Nella finestra di dialogo Aggiungi nuovo elemento seleziona Pagina vuota nel riquadro centrale.
  3. Nella casella Nome immettere page1 (o page2) e scegliere il pulsante Aggiungi.

Dopo avere eseguito questi passaggi due volte, al progetto dovrebbero essersi aggiunti i file seguenti.

  • BasicPage1.xaml
  • BasicPage1.xaml.cs o BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs o BasicPage2.xaml.vb

A questo punto dobbiamo usare le pagine che abbiamo aggiunto all'app. Apporta le modifiche seguenti a BasicPage1.xaml.

  • Trova l'elemento TextBlock denominato pageTitle e cambia la proprietà Text in Page 1. Il codice XAML dovrebbe avere un aspetto simile al seguente ("..." rappresenta altri attributi che non stai modificando):

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • Aggiungi il codice XAML seguente come secondo elemento figlio del Grid radice. L'elemento StackPanel deve essere di pari livello rispetto al Grid che contiene il pulsante Indietro e il titolo della pagina.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

Apporta le modifiche seguenti a BasicPage2.xaml.

  • Trova l'elemento TextBlock denominato pageTitle e cambia la proprietà Text in Page 2. Il codice XAML dovrebbe essere simile al seguente:

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • Aggiungi il codice XAML seguente come secondo elemento figlio del Grid radice. L'elemento StackPanel deve essere di pari livello rispetto al Grid che contiene il pulsante Indietro e il titolo della pagina.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
    </StackPanel>
    
    

Aggiungi il codice seguente alla classe BasicPage1 in BasicPage1.xaml.cs o BasicPage1.xaml.vb.


Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)
	Me.Frame.Navigate(GetType(BasicPage2))
End Sub	

Ora che abbiamo preparato le nuove pagine, dobbiamo fare in modo che l'elemento BasicPage1 sia la prima cosa che viene visualizzata all'avvio dell'app. Apri app.xaml.cs/vb e modifica il metodo OnLaunched per chiamare Frame.Navigate usando BasicPage1 al posto di BlankPage. La riga di codice pertinente è simile a questa:


    If Not rootFrame.Navigate(GetType(BasicPage1), e.Arguments) Then
...

Nota  Il codice usa il valore restituito di Navigate per generare un'eccezione dell'app se la navigazione al frame della finestra iniziale dell'app non riesce. Quando Navigate restituisce true viene eseguita la navigazione.

A questo punto sei pronto per testare l'app. Avvia l'app e fai clic sul link Click to go to page 2. Dovrebbe essere visualizzata la seconda pagina con il testo "Page 2" in alto. Nota che in un'app di Windows Store a sinistra del titolo della pagina è presente un pulsante Indietro. Fai clic sul pulsante per tornare alla prima pagina. In un'app di Windows Phone Store, fai clic sul pulsante Indietro per tornare alla prima pagina.

Classi Frame e Page

Prima di aggiungere altre funzionalità alla tua app, vediamo come le pagine aggiunte forniscono il supporto per la navigazione all'interno dell'app.

Il file App.xaml.cs/vb/cpp crea un oggetto Frame, se non ne esiste già uno, e imposta Frame come contenuto della finestra corrente. Se il contenuto del frame è Null, l'app passa alla home page come specificato nel code-behind App.xaml. Ad esempio, nell'Applicazione griglia il codice è rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") ).

La classe Frame è la classe principalmente responsabile della navigazione e implementa metodi come Navigate, GoBack e GoForward. Puoi usare il metodo Navigate per visualizzare contenuto in Frame. Nell'esempio precedente il metodo App.OnLaunched crea un Frame e passa BasicPage1 al metodo Navigate. Il metodo imposta quindi il contenuto della finestra corrente dell'app sul Frame. Il risultato è che la finestra dell'app contiene un Frame che contiene BasicPage1

BasicPage1 è una sottoclasse della classe Page. La classe Page ha una proprietà Frame, una proprietà di sola lettura che ottiene l'elemento Frame che contiene Page. Quando il gestore dell'evento Click di HyperlinkButton chiama Frame.Navigate(typeof(BasicPage2)), il Frame nella finestra dell'app visualizza il contenuto di BasicPage2.

Gestore della sospensione

Importante  

La classe helper SuspensionManager è fornita nei seguenti modelli di progetto:

App WindowsApp hub, app griglia e app divisa
App Windows PhoneApp hub, app Pivot
App universaliApp hub

 

La classe helper SuspensionManager non è fornita con i modelli dell'app vuota.

Durante la configurazione, SuspensionManager registra l'oggetto Frame. SuspensionManager è una classe helper fornita nella cartella Comune del modello che offre l'implementazione usata per archiviare e caricare lo stato quando l'app viene terminata.

Tutte le app passano da una fase all'altra del ciclo di vita di un'applicazione in base a quanto definito dal sistema operativo. Ogni volta che un'app viene terminata dal sistema, ad esempio a causa di vincoli delle risorse, di una chiusura, di un riavvio e così via, in qualità di sviluppatore dovrai ripristinare i dati non appena l'app riprenderà a funzionare. SuspensionManagerPer aiutarti a eseguire questa attività, viene fornito .

SuspensionManager acquisisce lo stato della sessione globale per semplificare la gestione della durata dei processi di un'applicazione. Lo stato della sessione viene automaticamente cancellato in numerose circostanze e deve essere usato solo per ripristinare le informazioni che conviene trasmettere da una sessione all'altra, ma che devono essere ignorate quando un'applicazione viene arrestata in modo anomalo o aggiornata. Tali informazioni includono sostanzialmente i dati temporanei dell'interfaccia utente.

SuspensionManager include due proprietà: SessionState e KnownTypes.

  • SessionState consente l'accesso allo stato globale della sessione corrente. Tale stato viene serializzato dal metodo SaveAsync e ripristinato dal metodo RestoreAsync. Tutti i dati vengono salvati e ripristinati usando DataContractSerialization e devono essere il più possibile compatti. Le stringhe sono altri tipi di dati autonomi vivamente consigliati.
  • KnownTypes archivia un elenco di tipi personalizzati forniti a DataContractSerializer e usati dai metodi SaveAsync e RestoreAsync per la lettura e la scrittura dello stato di una sessione. Questa proprietà è inizialmente vuota ma è possibile aggiungervi altri tipi per personalizzare il processo di serializzazione.

SuspensionManager archivia lo stato in un dizionario denominato SessionState. Tale dizionario archivia FrameState in base a una chiave associata in modo univoco a un Frame. Ogni dizionario FrameState conserva lo stato di ogni pagina nello stato di navigazione per tale frame specifico. Ogni pagina archivia il parametro di navigazione e gli eventuali altri stati che l'utente decide di aggiungere.

Vediamone in dettaglio il funzionamento: quando viene creato un Frame, se vuoi che il relativo stato venga archiviato, devi registrarlo immediatamente. Per farlo, occorre effettuare la chiamata (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")). A ogni frame deve essere associata una chiave univoca. In genere, la maggior parte delle app dispone di un singolo frame. Se dichiari un secondo frame, anche in questo caso dovrai registrarlo. Quando viene registrato un frame, vengono impostate due proprietà a esso associate. La prima è la chiave che hai associato al frame e la seconda è il dizionario dello stato della sessione che verrà associato al frame. La navigazione e lo stato dei frame precedentemente registrati verranno ripristinati immediatamente. È anche possibile annullare la registrazione dei frame. In questo caso, tutta la cronologia e lo stato di navigazione verranno cancellati.

Ecco invece i metodi per le chiamate importanti: SaveAsync e RestoreAsync. SaveAsync viene usato per salvare tutto il SessionState. Tutti i frame registrati tramite SuspensionManager.RegisterFrame conserveranno anche il rispettivo stack di navigazione corrente e potranno in questo modo salvare i dati della loro pagina attiva. SessionState viene quindi serializzato mediante un DataContractSerializer e scritto in un file archiviato nella cartella locale in base a quanto definito da ApplicationData.

Per leggere nel SessionState salvato in precedenza, viene usato il metodo RestoreAsync. Tutti i frame registrati tramite RegisterFrame ripristineranno anche il rispettivo stack di navigazione corrente e potranno in questo modo salvare lo stato della loro pagina attiva. Ancora una volta, come per SaveAsync, viene usato un DataContractSerializer per deserializzare lo stato archiviato in un file incluso nella cartella locale dell'applicazione.

Gli utenti osservano due errori comuni quando tentano di archiviare lo stato della loro app.

  • I tipi archiviati dalle singole pagine devono poter essere serializzati dal DataContractSerializer in C# e VB. A questo scopo, è innanzitutto necessario registrare tutti i tipi personalizzati per poterli salvare o ripristinare. SuspensionManager fornisce la raccolta KnownTypes che passa i propri tipi al DataContractSerializer. Poiché SuspensionManager viene chiamato per ripristinare lo stato nell'override del metodo OnLaunched del code-behind di App.xaml, una posizione consigliabile per registrare i tipi è rappresentata dal costruttore dell'app.
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • I parametri passati tramite navigazione devono poter essere serializzati dalla piattaforma. Quando salviamo e ripristiniamo lo stack di navigazione, chiamiamo Frame.GetNavigationState() e Frame.SetNavigationState(). Entrambe le chiamate usano un formato di serializzazione interno e tutti i tipi passati come parametro in Frame.Navigate() devono poter essere serializzati dalla piattaforma.
L'uso di SuspensionManager è incapsulato nell'implementazione di NavigationHelper.

NavigationHelper è un'implementazione di una pagina che offre i seguenti vantaggi importanti:

  • Gestori di eventi per Navigate, GoBack e GoForward.
  • Scelte rapide con il mouse e tasti di scelta rapida per la navigazione.
  • Gestione dello stato per la navigazione e gestione della durata dei processi.

Oltre a fornire le implementazioni descritte, NavigationHelper deve anche essere chiamato dai gestori eventi OnNavigatedTo() e OnNavigatedFrom() che sono implementati in ogni pagina. Quando si verificano tali eventi, NavigationHelper chiama un'implementazione specifica della pagina di LoadState() e SaveState(). Puoi personalizzare l'implementazione di queste funzioni in ogni pagina. Tali eventi devono essere usati rispettivamente al posto di OnNavigatedTo() e OnNavigatedFrom().

Nota  Per le app di Windows Phone Store, l'evento OnNavigatedFrom() viene chiamato alla sospensione dell'app. L'evento OnNavigatedTo() non viene chiamato alla ripresa.

OnNavigatedFrom() viene chiamato quando la pagina è in procinto di essere visualizzata in un Frame. Quando ci spostiamo in una nuova pagina, carichiamo lo stato associato a tale pagina. Se è in corso il ripristino della pagina, ne viene recuperato lo stato salvato in precedenza. Viene quindi chiamato LoadState in modo che ogni pagina possa reagire. LoadState include due parametri, ovvero il parametro di navigazione originale passato in OnNavigatedTo e lo stato precedente della pagina, se disponibile.

OnNavigatedFrom() viene chiamato se la pagina non verrà più visualizzata in un Frame. Quando abbandoniamo una pagina, permettiamo che la pagina salvi il proprio stato corrente. Viene passato un dizionario vuoto a SaveState(). Ogni pagina può eseguire l'override di SaveState e archiviare gli oggetti nel dizionario con chiave (stringa a oggetto). Tale dizionario viene quindi associato alla pagina e aggiunto al SessionState di cui SuspensionManager tiene traccia per il frame in questione.

Nota  
  • Tutti i dati archiviati nella singola pagina devono essere disponibili per poter essere serializzati da DataContractSerializer.
  • È anche importante archiviare solo le informazioni temporanee dell'interfaccia utente, in quanto questo stato andrà perso se l'app non verrà chiusa specificando Terminated.

Supporto per la navigazione nei modelli di pagina

Per creare le pagine di navigazione, abbiamo usato il modello Pagina base. Questo modello, così come gli altri modelli che supportano la navigazione, crea una pagina che contiene un pulsante Indietro nell'angolo superiore sinistro. Il pulsante è impostato in modo da essere visibile solo quando viene abilitato. Ecco perché non vedi il pulsante Indietro nella prima pagina ma solo nella seconda.

I modelli di pagina seguenti offrono lo stesso supporto per la navigazione.

  • Pagina base
  • Pagina dettagli gruppo
  • Pagina elementi raggruppati
  • Pagina dettagli elemento
  • Pagina elementi
  • Pagina divisa
  • Pagina hub
  • Pagina risultati ricerca

Passaggio di informazioni tra pagine

La nostra app naviga tra due pagine, ma non fa ancora nulla di interessante. Spesso, quando un'app ha più pagine, le pagine devono condividere le informazioni. Passiamo quindi alcune informazioni dalla prima alla seconda pagina.

In BasicPage1.xaml sostituisci l'elemento StackPanel aggiunto in precedenza con questo codice XAML.


<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
</StackPanel>


In BasicPage1.xaml.cs o BasicPage1.xaml.vb sostituisci il gestore dell'evento HyperlinkButton_Click con il codice seguente.


    Private Sub HyperlinkButton_Click(sender As Object, e As RoutedEventArgs)

        Me.Frame.Navigate(GetType(BasicPage2), tb1.Text)

    End Sub
	

In BasicPage2.xaml.cs o BasicPage2.xaml.vb, completa il metodo navigationHelper_LoadState vuoto con:


    Private Sub navigationHelper_LoadState((e As NavigationHelper.LoadStateEventArgs)
        Dim name As String = TryCast(e.NavigationParameter, String)
        If Not String.IsNullOrWhiteSpace(name) Then
            tb1.Text = "Hello, " & name
        Else
            tb1.Text = "Name is required.  Go back and enter a name."
        End If
    End Sub

Esegui l'app, digita il tuo nome nella casella di testo e quindi fai clic sul link Click to go to page 2. Chiamando this.Frame.Navigate(typeof(BasicPage2), tb1.Text); nell'evento Click diHyperlinkButton, la proprietà tb1.Text viene passata durante il caricamento di BasicPage2. Il metodo navigationHelper_LoadState di BlankPage2 ottiene quindi il valore dai dati dell'evento e lo usa per visualizzare un messaggio.

Memorizzazione di una pagina nella cache

Durante l'esecuzione dell'ultimo esempio, potresti aver notato che dopo aver fatto clic sul pulsante Indietro in BasicPage2, la TextBox in BasicPage1 appare vuota. Supponiamo che l'utente dell'app voglia tornare indietro e apportare una modifica nella pagina precedente. Se BasicPage1 contenesse molti campi da compilare, l'utente non sarebbe felice di trovarli tutti reimpostati quando torna su quella pagina. Per risolvere il problema, puoi specificare che una pagina venga memorizzata nella cache usando la proprietà NavigationCacheMode. Nel costruttore di BasicPage1, imposta NavigationCacheMode su Enabled.


Sub New()
    InitializeComponent()
    ...
    Me.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled
End Sub


Ora, quando esegui l'app e navighi da BasicPage2 a BasicPage1, il controllo TextBox in BasicPage1 conserva il suo valore.

Riepilogo

In questo argomento hai appreso come creare un'app semplice che naviga tra pagine. Hai imparato come si passano informazioni da una pagina a un'altra e anche come specificare che lo stato di una pagina deve essere memorizzato nella cache.

Passaggi successivi

Per un esempio completo che usa molte delle funzionalità di Page e Frame insieme, vedi l'esempio di navigazione XAML. L'esempio include caratteristiche non illustrate qui, tra cui:

Argomenti correlati

Navigazione tra le pagine
Per progettisti
Modelli di esplorazione
Modelli d'uso dei comandi
Layout
Pulsante Indietro
Linee guida per il controllo hub
Linee guida per le barre dell'app (app di Windows Runtime)
Come rendere accessibile la barra dell'app
Per sviluppatori (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
La tua prima app - Parte 3: Navigazione, layout e visualizzazioni
La tua prima app - Aggiungere una struttura di navigazione e visualizzazioni in un'app di Windows Store scritta in C++ (esercitazione 3 di 4)
Esempio di controllo hub XAML
Esempio di controllo AppBar XAML
Esempio di navigazione XAML
Aggiunta di barre dell'app (XAML)

 

 

Mostra:
© 2015 Microsoft