Attività iniziali: NavigazioneGetting started: Navigation

Aggiunta dei controlli di spostamentoAdding navigation

iOS fornisce la classe UINavigationController per semplificare lo spostamento in-app: puoi usare visualizzazioni di push e prelievo per creare la gerarchia di elementi UIViewController che definiscono la tua app.iOS provides the UINavigationController class to help with in-app navigation: you can push and pop views to create the hierarchy of UIViewControllers that define your app.

Al contrario, un'app di Windows 10 che contiene più visualizzazioni richiede molto più di un approccio allo spostamento simile a quello di un sito Web.In contrast, a Windows 10 app containing multiple views takes more of a web-site approach to navigation. Puoi immaginare che gli utenti passino rapidamente da una pagina all'altra facendo clic sui controlli per accedere alle varie funzionalità dell'app.You can imagine your users hopping from page to page as they click on controls to work their way through the app. Per altre info, vedi Nozioni di base sulla progettazione della struttura di spostamento.For more info, see Navigation design basics.

Uno dei modi per gestire le opzioni di spostamento in un'app di Windows 10 consiste nell'usare la classe Frame.One of the ways to manage this navigation in a Windows 10 app is to use the Frame class. Proveremo questo scenario nella sezione seguente.The following walkthrough shows you how to try this out.

Continuando con la soluzione che hai iniziato in precedenza, apri il file MainPage.xaml e aggiungi un pulsante nella visualizzazione Progettazione.Continuing with the solution you started earlier, open the MainPage.xaml file, and add a button in the Design view. Modifica la proprietà Content del pulsante da "Button" a "Go To Page".Change the button's Content property from "Button" to "Go To Page". Crea quindi un gestore per l'evento Click del pulsante, come illustrato nella figura seguente.Then, create a handler for the button's Click event, as shown in the following figure. Se non ricordi come fare, rivedi la procedura dettagliata nella sezione precedente. Suggerimento: fai doppio clic sul pulsante nella visualizzazione Progettazione.If you don't remember how to do this, review the walkthrough in the previous section (Hint: double-click the button in the Design view).

Aggiunta di un pulsante e del relativo evento Click in Visual Studio

Aggiungiamo una nuova pagina.Let's add a new page. Nella visualizzazione Soluzione tocca il menu Progetto e quindi Aggiungi nuovo elemento.In the Solution view, tap the Project menu, and tap Add New Item. Tocca Pagina vuota come illustrato nella figura seguente e quindi Aggiungi.Tap Blank Page as shown in the following figure, and then tap Add.

Aggiunta di una nuova pagina in Visual Studio

Aggiungi quindi un pulsante al file BlankPage.xaml.Next, add a button to the BlankPage.xaml file. Usiamo il controllo AppBarButton e diamogli l'immagine di una freccia nera: nella visualizzazione XAML aggiungi <AppBarButton Icon="Back"/> tra gli elementi <Grid> </Grid>.Let's use the AppBarButton control, and let's give it a back arrow image: in the XAML view, add <AppBarButton Icon="Back"/> between the <Grid> </Grid> elements.

A questo punto, aggiungere un gestore eventi al pulsante: fare doppio clic sul controllo nella visualizzazione progettazione e Microsoft Visual Studio aggiunge il testo "AppBarButton _ clic" alla casella di clic , come illustrato nella figura seguente, quindi aggiunge e visualizza il gestore eventi corrispondente nel file BlankPage.XAML.cs.Now, let's add an event handler to the button: double-click the control in the Design view and Microsoft Visual Studio adds the text "AppBarButton_Click" to the Click box, as shown in the following figure, and then adds and displays the corresponding event handler in the BlankPage.xaml.cs file.

Aggiunta di un pulsante indietro e del relativo evento Click in Visual Studio

Se torni alla visualizzazione XAML del file BlankPage.xaml , il codice XAML (Extensible Application Markup Language) dell'elemento <AppBarButton> dovrebbe risultare analogo a questo:If you return to the BlankPage.xaml file's XAML view, the <AppBarButton> element's Extensible Application Markup Language (XAML) code should now look like this:

<AppBarButton Icon="Back" Click="AppBarButton_Click"/>

Torna al file BlankPage.xaml.cs e aggiungi questo codice per passare alla pagina precedente quando l'utente tocca il pulsante.Return to the BlankPage.xaml.cs file, and add this code to go to the previous page after the user taps the button.

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    Frame.GoBack();
}

Infine, apri il file MainPage.xaml.cs e aggiungi questo codiceFinally, open the MainPage.xaml.cs file and add this code. Quando l'utente toccherà il pulsante verrà aperto BlankPage.It opens BlankPage after the user taps the button.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.
    Frame.Navigate(typeof(BlankPage1));
}

Eseguiamo quindi il programma.Now, run the program. Tocca il pulsante "Go To Page" per passare all'altra pagina e quindi il pulsante freccia indietro per tornare alla pagina precedente.Tap the "Go To Page" button to go to the other page, and then tap the back-arrow button to return to the previous page.

La navigazione tra le pagine è gestita dalla classe Frame.Page navigation is managed by the Frame class. Poiché la classe UINavigationController in iOS usa i metodi pushViewController e popViewController , la classe frame per le app UWP fornisce i metodi Navigate e GoBack .As the UINavigationController class in iOS uses pushViewController and popViewController methods, the Frame class for UWP apps provides Navigate and GoBack methods. La classe Frame include anche un metodo denominato GoForward, che esegue proprio l'operazione prevista.The Frame class also has a method called GoForward, which does what you might expect.

Questa procedura dettagliata consente di creare una nuova istanza di BlankPage ogni volta che passi a questa pagina.This walkthrough creates a new instance of BlankPage each time you navigate to it. L'istanza precedente viene liberata o rilasciata automaticamente.(The previous instance will be freed, or released, automatically). Se non vuoi che venga creata ogni volta una nuova istanza, aggiungi il codice seguente al costruttore della classe BlankPage nel file BlankPage.xaml.csIf you don't want a new instance to be created each time, add the following code to the BlankPage class's constructor in the BlankPage.xaml.cs file. In questo modo verrà abilitato il comportamento di NavigationCacheMode .This will enable the NavigationCacheMode behavior.

public BlankPage()
{
    this.InitializeComponent();
    // Add the following line of code.
    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}

Puoi anche ottenere o impostare la proprietà CacheSize della classe Frame per gestire il numero di pagine della cronologia degli spostamenti che possono essere memorizzate nella cache.You can also get or set the Frame class's CacheSize property to manage how many pages in the navigation history can be cached.

Per altre informazioni sullo spostamento, vedi Spostamenti e Esempio di animazione di personalità XAML.For more info about navigation, see Navigation and XAML personality animations sample.

Nota    Per informazioni sulla navigazione per le app UWP che usano JavaScript e HTML, vedere Guida introduttiva: uso della navigazione a pagina singola.Note  For info about navigation for UWP apps using JavaScript and HTML, see Quickstart: Using single-page navigation.  

Passaggio successivoNext step

Attività iniziali: AnimazioneGetting started: Animation