Navigera mellan sidor

Den här delen av handledningen lägger till den sista delen i appen, navigering mellan sidan alla anteckningar och den enskilda anteckningen.

Innan du skriver någon kod för att hantera navigering i appen ska vi beskriva det förväntade navigeringsbeteendet.

I AllNotesPagefinns samlingen med befintliga anteckningar och knappen Ny anteckning .

• Om du klickar på en befintlig anteckning ska du navigera till anteckningssidan och öppna anteckningen som du klickade på.
• Om du klickar på knappen Ny anteckning ska du gå till anteckningssidan och läsa in en tom anteckning som inte har sparats.

På anteckningssidan lägger du till en bakåtknapp och det finns knapparna Spara och Ta bort .

• Om du klickar på bakåtknappen ska du gå tillbaka till sidan alla anteckningar och ignorera eventuella ändringar som gjorts i anteckningen.
• Om du klickar på knappen Ta bort ska du ta bort anteckningen och sedan gå tillbaka.

Ny anteckning

Först ska du hantera navigeringen för en ny anteckning.

1. I AllNotesPage.xaml letar du reda på AppBarButton för en ny anteckning.

2. Lägg till en Click händelsehanterare och byt namn på den till NewNoteButton_Click. (Se Lägg till händelsehanterare i steget på anteckningssidan om du behöver en påminnelse om hur du gör detta.)

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

3. NewNoteButton_Click I metoden (i AllNotesPage.xaml.cs) lägg till den här koden:

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

Varje sida har en ramegenskap som ger en referens till den Frame-instans som Page tillhör (om någon). Det är det Frame som du anropar Navigate-metoden på här. Metoden Navigate tar den typ av sida som du vill navigera till. Du får det Type i C# med hjälp av operatorn typeof .

Om du kör appen nu kan du klicka på knappen Ny anteckning för att navigera till anteckningssidan och skriva in i anteckningsredigeraren. Men om du försöker spara anteckningen händer ingenting. Det beror på att en instans av Note modellen inte har skapats på anteckningssidan ännu. Det gör du nu.

1. Öppna NotePage.xaml.cs.

2. Lägg till kod för att åsidosätta sidans OnNavigatedTo-metod .

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

När du nu navigerar till NotePageskapas en ny instans av Note modellen.

Befintliga anteckningar

Nu ska du lägga till navigering för befintliga anteckningar. För närvarande, när du klickar på anteckningen i ItemsView, markeras anteckningen, men ingenting händer. Standardbeteendet för de flesta samlingskontroller är en enskild markering, vilket innebär att ett objekt väljs i taget. Du uppdaterar ItemsView så att du i stället för att välja det kan klicka på ett objekt som en knapp.

1. Öppna AllNotesPage.xaml.

2. Uppdatera XAML för ItemsView med SelectionMode = None och IsItemInvokedEnabled = True.

3. Lägg till en hanterare för händelsen 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. Leta upp metoden i AllNotesPage.xaml.cs. (Om Visual Studio inte skapade den åt dig, vilket kan inträffa om du kopierar och klistrar in koden, lägger du till den i nästa steg.)

5. ItemsView_ItemInvoked I -metoden lägger du till kod för att navigera till NotePage. Den här gången använder du en överlagrad version av Navigate-metoden som låter dig skicka ett objekt till den andra sidan. Skicka den anropade Note som den andra navigeringsparametern.

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

6. Öppna NotePage.xaml.cs.

7. Uppdatera metodöverskrivningen för att hantera OnNavigatedTo som skickas med anropet till Note.

   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. ↑
   }
   

   I den här koden kontrollerar du först om den skickade parametern är ett Note objekt. I så fall tilldelar du den som Note modell för sidan. Om det är null eller inte en Noteskapar du en ny Note som tidigare.

Bakåtnavigering

Slutligen måste du uppdatera appen så att du kan gå tillbaka från en enskild anteckning till sidan alla anteckningar.

Kontrollen WinUI 3 TitleBar innehåller en bakåtknapp som uppfyller alla Fluent Design-riktlinjer för placering och utseende. Du använder den här inbyggda knappen för bakåtnavigering.

1. Öppna MainWindow.xaml.

2. Uppdatera XAML för TitleBar med IsBackButtonVisible = True och IsBackButtonEnabled som är bundna till egenskapen Frame.CanGoBack .

3. Lägg till en hanterare för backrequested-händelsen . Din XAML bör se ut så här:

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

   Här är egenskapen IsBackButtonVisible inställd på true. Detta gör att bakåtknappen visas i det övre vänstra hörnet i appfönstret.

   Sedan är egenskapen IsBackButtonEnabled bunden till egenskapen Frame.CanGoBack , så bakåtknappen aktiveras endast om ramen kan navigera tillbaka.

   Slutligen läggs händelsehanteraren BackRequested till. Det är här du placerar koden för att navigera tillbaka.

4. I MainWindow.xaml.cs lägger du till den här koden i AppTitleBar_BackRequested metoden:

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

   Klassen Frame håller reda på navigeringen i sin BackStack så att du kan gå tillbaka till föregående sidor genom att anropa GoBack-metoden . Det är en bra idé att alltid kontrollera egenskapen CanGoBack innan du anropar GoBack.

Därefter måste du uppdatera koden i NotePage för att gå tillbaka när anteckningen har tagits bort.

1. Öppna NotePage.xaml.cs.

2. DeleteButton_Click Uppdatera händelsehanterarmetoden med ett anrop till Frame.CanGoBack metoden när anteckningen har tagits bort:

   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. ↑
   }
   

Nu kan du köra din app. Prova att lägga till nya anteckningar, navigera fram och tillbaka mellan anteckningar och ta bort anteckningar.

Läs mer i dokumenten:

• Implementera navigering mellan två sidor
• Navigeringshistorik och bakåtriktad navigering
• Ramklass, Sidklass

Nästa steg

Grattis! Du har slutfört självstudien Skapa en WinUI-app !

Följande länkar innehåller mer information om hur du skapar appar med WinUI och Windows App SDK:

• Exempel och resurser
• Design för Windows-appar
• Utveckla Windows-skrivbordsappar
• Kontroller för Windows-appar