Condividi tramite

Spostarsi tra le pagine

Questa parte dell'esercitazione aggiunge la parte finale all'app, lo spostamento tra la pagina di tutte le note e la singola pagina delle note .

Prima di scrivere codice per gestire lo spostamento in-app, descrivere il comportamento di spostamento previsto.

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 tutte le note, rimuovendo 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 trovare per AppBarButton 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 metodo che 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

A questo punto si aggiungerà lo spostamento 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. Si aggiornerà in ItemsView modo che invece di selezionarlo, è possibile 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 aggiungere il ItemsView_ItemInvoked codice per passare a NotePage. Questa volta si userà un overload del metodo Navigate che consente di passare un oggetto all'altra pagina. Passare l'oggetto richiamato 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. Aggiornare l'override del OnNavigatedTo metodo per gestire l'oggetto Note 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 è o non è null , Notecreare un nuovo Note come 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 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 da tornare 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

Si potrebbe aver notato che in NotePage, si chiama Frame.GoBack, mentre in MainWindow è stato chiamato 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