Condividi tramite

Spostarsi tra le pagine

Questa parte dell'esercitazione aggiunge l'ultimo componente all'app, permettendo la navigazione tra la pagina di tutte le note e la pagina della singola nota.

Prima di scrivere codice per gestire la navigazione in-app, descriviamo il comportamento di navigazione atteso.

In AllNotesPageè presente la raccolta di note esistenti e un pulsante Nuova nota .

  • Facendo clic su una nota esistente, passare alla pagina della nota e caricare la nota selezionata.
  • Fare clic sul pulsante Nuova nota per passare alla pagina della nota e caricare una nota vuota e non salvata.

Nella pagina della nota si aggiungerà un pulsante Indietro e sono disponibili i pulsanti Salva ed Elimina .

  • Facendo clic sul pulsante Indietro, tornare alla pagina di tutte le note, annullando le modifiche apportate alla nota.
  • Fare clic sul pulsante Elimina per eliminare la nota e quindi tornare indietro.

Nuova nota

In primo luogo, si gestirà lo spostamento per una nuova nota.

Suggerimento

È possibile scaricare o visualizzare il codice per questa esercitazione dal repository GitHub. Per visualizzare il codice così com'è in questo passaggio, vedere questo commit: navigazione - nuova nota.

  1. In AllNotesPage.xaml, trova il AppBarButton per una nuova nota.

  2. Aggiungere un Click gestore eventi e rinominarlo in NewNoteButton_Click. Se è necessario un promemoria su come eseguire questa operazione, vedere Aggiungere gestori eventi nel passaggio della pagina note.

    <AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>

  3. NewNoteButton_Click Nel metodo (in AllNotesPage.xaml.cs) aggiungere questo codice:

    private void NewNoteButton_Click(object sender, RoutedEventArgs e)
{
    // ↓ Add this. ↓
    Frame.Navigate(typeof(NotePage));
}

Ogni page ha una proprietà Frame che fornisce un riferimento all'istanza frame a cui Page appartiene (se presente). Questo è il Frame su cui chiami il metodo Navigate qui. Il Navigate metodo accetta il tipo della pagina a cui si desidera passare. È possibile ottenerlo Type in C# usando l'operatore typeof .

Se si esegue l'app ora, è possibile fare clic sul pulsante Nuova nota per passare alla pagina della nota ed è possibile digitare nell'editor note. Tuttavia, se si tenta di salvare la nota, non accadrà nulla. Ciò è dovuto al fatto che non è stata ancora creata un'istanza del Note modello nella pagina della nota. Lo farai ora.

  1. Aprire NotePage.xaml.cs.

  2. Aggiungere il codice per eseguire l'override del metodo OnNavigatedTo della pagina.

    public NotePage()
{
    this.InitializeComponent();
}
//  ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    noteModel = new Note();
}

Quando si passa a NotePage, viene creata una nuova istanza del Note modello.

Note esistenti

Ora aggiungerai la navigazione per le note esistenti. Attualmente, quando si fa clic sulla nota in ItemsView, la nota è selezionata, ma non accade nulla. Il comportamento predefinito per la maggior parte dei controlli raccolta è la selezione singola, ovvero un elemento viene selezionato alla volta. Aggiornerai il ItemsView in modo che, anziché selezionarlo, puoi fare clic su un elemento come un pulsante.

Suggerimento

È possibile scaricare o visualizzare il codice per questa esercitazione dal repository GitHub. Per visualizzare il codice così com'è in questo passaggio, vedere questo commit: navigazione - app finale.

  1. Aprire AllNotesPage.xaml.

  2. Aggiornare il codice XAML per ItemsView con SelectionMode = None e IsItemInvokedEnabled = True.

  3. Aggiungere un gestore per l'evento ItemInvoked .

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24" 
           ItemTemplate="{StaticResource NoteItemTemplate}"
           <!-- ↓ Add this. ↓ -->
           SelectionMode="None"
           IsItemInvokedEnabled="True"
           ItemInvoked="ItemsView_ItemInvoked">

  4. In AllNotesPage.xaml.cs trovare il ItemsView_ItemInvoked metodo . Se Visual Studio non lo ha creato automaticamente, che può verificarsi se si copia e incolla il codice, aggiungerlo nel passaggio successivo.

  5. Nel metodo ItemsView_ItemInvoked, aggiungere del codice per navigare a NotePage. Questa volta userai un overload del metodo Navigate che consente di passare un oggetto all'altra pagina. Passare l'elemento invocato Note come secondo parametro di navigazione.

    private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}

  6. Aprire NotePage.xaml.cs.

  7. Aggiorna il metodo override di OnNavigatedTo per gestire Note che è passato dalla chiamata a Navigate.

    protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //  ↓ Update this. ↓
    if (e.Parameter is Note note)
    {
        noteModel = note;
    }
    else
    {
        noteModel = new Note();
    }
   // ↑ Update this. ↑
}

    In questo codice si verifica prima di tutto se il parametro passato è un Note oggetto . In caso affermativo, lo si assegna come Note modello per la pagina. Se è null o non è un Note, crea un nuovo Note come fatto in precedenza.

Spostamento indietro

Infine, è necessario aggiornare l'app in modo da poter tornare da una singola nota alla pagina tutte le note.

Il controllo TitleBar winUI 3 include un pulsante Indietro che soddisfa tutte le linee guida di Fluent Design per il posizionamento e l'aspetto. Questo pulsante predefinito verrà usato per lo spostamento indietro.

  1. Aprire MainWindow.xaml.

  2. Aggiornare il codice XAML per TitleBar con IsBackButtonVisible = True e IsBackButtonEnabled associato alla proprietà Frame.CanGoBack .

  3. Aggiungere un gestore per l'evento BackRequested . Il codice XAML dovrebbe essere simile al seguente:

    <TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">

    In questo caso, la proprietà IsBackButtonVisible è impostata su true. In questo modo il pulsante Indietro viene visualizzato nell'angolo superiore sinistro della finestra dell'app.

    Quindi, la proprietà IsBackButtonEnabled è associata alla proprietà Frame.CanGoBack , quindi il pulsante Indietro è abilitato solo se il frame può tornare indietro.

    Viene infine aggiunto il gestore eventi BackRequested . Qui si inserisce il codice per navigare indietro.

  4. In MainWindow.xaml.cs aggiungere questo codice al AppTitleBar_BackRequested metodo :

    private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}

    La Frame classe tiene traccia della navigazione nel relativo BackStack, in modo da poter tornare alle pagine precedenti semplicemente chiamando il metodo GoBack . È consigliabile controllare sempre la proprietà CanGoBack prima di chiamare GoBack.

Successivamente, è necessario aggiornare il codice in NotePage per tornare indietro dopo l'eliminazione della nota.

  1. Aprire NotePage.xaml.cs.

  2. Aggiornare il metodo del DeleteButton_Click gestore eventi con una chiamata al Frame.CanGoBack metodo dopo l'eliminazione della nota:

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        await noteModel.DeleteAsync();
    }
    // ↓ Add this. ↓
    if (Frame.CanGoBack == true)
    {
        Frame.GoBack();
    }
    // ↑ Add this. ↑
}

Suggerimento

Potresti aver notato che in NotePage, chiami Frame.GoBack, mentre in MainWindow chiamavi rootFrame.GoBack. Ciò è dovuto al fatto che la classe Page ha una proprietà Frame che ottiene l'oggetto Frame che ospita , Pagese presente. In questo caso, ottiene un riferimento a rootFrame.

È ora possibile eseguire l'app. Provare ad aggiungere nuove note, spostarsi tra le note e eliminare le note.

Per altre informazioni, vedere la documentazione:

Passaggi successivi

Congratulazioni! L'esercitazione Creare un'app WinUI è stata completata.

I collegamenti seguenti forniscono altre informazioni sulla creazione di app con WinUI e Windows App SDK:

  • Last updated on