Dela via

Navigera mellan sidor

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

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 gå till anteckningssidan och läsa in anteckningen som klickades.
  • 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.

Tips/Råd

Du kan ladda ned eller visa koden för den här självstudien från GitHub-lagringsplatsen. Om du vill se koden som den är i det här steget läser du den här incheckningen: navigering – 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 anteckningssidans steg 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ägger du 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 metoden Navigate 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. När du klickar på anteckningen i markeras anteckningen ItemsViewför närvarande, 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.

Tips/Råd

Du kan ladda ned eller visa koden för den här självstudien från GitHub-lagringsplatsen. Om du vill se koden som den är i det här steget kan du läsa den här incheckningen: navigering – slutlig app.

  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 ItemsView_ItemInvoked 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 överlagring av metoden Navigate som gör att du kan 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. OnNavigatedTo Uppdatera metodens åsidosättning för att hantera Note det som skickas av anropet till 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. ↑
}

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

Tips/Råd

Du kanske har märkt att i NotePageanropar Frame.GoBackdu , medan MainWindow du ringde rootFrame.GoBack. Det beror på att klassen Page har en frame-egenskap som hämtar Frame den som är värd för Page, om någon. I det här fallet får den en referens till rootFrame.

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:

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:

  • Last updated on