Sdílet prostřednictvím

Navigace mezi stránkami

Tato část kurzu přidá do aplikace poslední část, navigaci mezi všemi stránkami poznámek a jednotlivými stránkami poznámek .

Než napíšeme jakýkoli kód pro zpracování navigace v aplikaci, popíšeme očekávané chování navigace.

V AllNotesPagekolekci existujících poznámek a tlačítka Nová poznámka .

  • Kliknutím na existující poznámku přejděte na stránku poznámky a načtěte poznámku, na kterou jsme klikli.
  • Kliknutím na tlačítko Nová poznámka přejděte na stránku poznámky a načtěte prázdnou neuložené poznámku.

Na stránce poznámek přidáte tlačítko Zpět a tam jsou tlačítka Uložit a Odstranit .

  • Kliknutím na tlačítko Zpět byste měli přejít zpět na stránku všech poznámek a zahodit všechny změny provedené v poznámce.
  • Kliknutím na tlačítko Odstranit byste měli poznámku odstranit a pak přejít zpět.

Nová poznámka

Nejprve zpracujete navigaci pro novou poznámku.

Návod

Kód pro účely tohoto kurzu si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete zobrazit kód, jak je v tomto kroku, podívejte se na toto potvrzení: navigace – nová poznámka.

  1. V souboru AllNotesPage.xaml vyhledejte novou poznámku AppBarButton .

  2. Přidejte obslužnou rutinu Click události a přejmenujte ji na NewNoteButton_Click. (Pokud potřebujete připomenutí, jak to udělat, podívejte se na přidání obslužných rutin událostí v kroku stránky poznámek.)

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

  3. NewNoteButton_Click Do metody (v AllNotesPage.xaml.cs) přidejte tento kód:

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

Každá stránka má vlastnost Frame , která poskytuje odkaz na instanci Frame , ke které Page patří (pokud existuje). To je Frame to, že tady voláte metodu Navigate . Metoda Navigate přebírá typ stránky, na kterou chcete přejít. To získáte Type v jazyce C# pomocí operátoru typeof .

Pokud teď aplikaci spustíte, můžete kliknutím na tlačítko Nová poznámka přejít na stránku poznámky a zadat ji do editoru poznámek. Pokud se ale pokusíte poznámku uložit, nic se nestane. Důvodem je to, že instance Note modelu ještě nebyla vytvořena na stránce poznámek. Teď to uděláte.

  1. Otevřete NotePage.xaml.cs.

  2. Přidejte kód pro přepsání metody OnNavigatedTo stránky.

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

    noteModel = new Note();
}

Když teď přejdete na NotePage, vytvoří se nová instance Note modelu.

Existující poznámky

Teď přidáte navigaci pro existující poznámky. V současné době, když kliknete na poznámku ItemsViewv , je vybrána poznámka, ale nic se nestane. Výchozí chování většiny ovládacích prvků kolekce je jeden výběr, což znamená, že je najednou vybrána jedna položka. Aktualizujete ItemsView ho tak, aby místo jeho výběru bylo možné kliknout na položku, jako je tlačítko.

Návod

Kód pro účely tohoto kurzu si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete vidět kód, jak je v tomto kroku, podívejte se na toto potvrzení: navigace – konečná aplikace.

  1. Otevřete Soubor AllNotesPage.xaml.

  2. Aktualizujte XAML pro ItemsViewSelectionMode = None a IsItemInvokedEnabled = True.

  3. Přidejte obslužnou rutinu pro událost ItemInvolat .

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

  4. V AllNotesPage.xaml.cs vyhledejte metodu ItemsView_ItemInvoked . (Pokud vám Visual Studio ho nevytvořilo, což se může stát, když kód zkopírujete a vložíte, přidejte ho v dalším kroku.)

  5. ItemsView_ItemInvoked V metodě přidejte kód pro přechod na NotePage. Tentokrát použijete přetížení metody Navigate , která umožňuje předat objekt na druhou stránku. Předejte vyvolaný Note jako druhý navigační parametr.

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

  6. Otevřete NotePage.xaml.cs.

  7. OnNavigatedTo Aktualizujte přepsání metody pro zpracováníNote, které bylo předáno voláním 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. ↑
}

    V tomto kódu nejprve zkontrolujete, jestli je předaný parametr objektem Note . Pokud ano, přiřadíte ho jako Note model stránky. Pokud je null nebo není Note, vytvořte nový Note jako předtím.

Zpětná navigace

Nakonec musíte aplikaci aktualizovat, abyste se mohli vrátit z jednotlivé poznámky na stránku všech poznámek.

Ovládací prvek WinUI TitleBar obsahuje tlačítko zpět, které splňuje všechny pokyny fluent Design pro umístění a vzhled. Toto předdefinované tlačítko použijete pro návratovou navigaci.

  1. Otevřete MainWindow.xaml.

  2. Aktualizujte XAML pro TitleBarIsBackButtonVisible = True a IsBackButtonEnabled vázané na Frame.CanGoBack vlastnost.

  3. Přidejte obslužnou rutinu události BackRequested . Xaml by měl vypadat takto:

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

    Zde je vlastnost IsBackButtonVisible nastavena na true. Díky tomu se tlačítko Zpět zobrazí v levém horním rohu okna aplikace.

    Poté IsBackButtonEnabled vlastnost je vázán na Frame.CanGoBack vlastnost, takže tlačítko Zpět je povoleno pouze v případě, že rámeček může přejít zpět.

    Nakonec se přidá obslužná rutina události BackRequested . Tady umístíte kód, který se má vrátit.

  4. V MainWindow.xaml.cs přidejte tento kód do AppTitleBar_BackRequested metody:

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

    Třída Frame sleduje navigaci v backStacku, takže můžete přejít zpět na předchozí stránky jednoduše voláním metody GoBack . Před voláním je osvědčeným postupem vždy zkontrolovat vlastnost GoBack .

Dále je potřeba aktualizovat kód NotePage , aby se po odstranění poznámky vrátil zpět.

  1. Otevřete NotePage.xaml.cs.

  2. Aktualizujte metodu DeleteButton_Click obslužné rutiny události voláním Frame.CanGoBack metody po odstranění poznámky:

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

Návod

Možná jste si všimli, že jste volali NotePageFrame.GoBack, MainWindow zatímco jste volali rootFrame.GoBack. Je to proto, že Page třída má Frame vlastnost, která získá Frame , který je hostitelem Page, pokud existuje. V tomto případě získá odkaz na rootFrame.

Teď můžete aplikaci spustit. Zkuste přidat nové poznámky, procházet mezi poznámkami a odstraňovat poznámky.

Další informace najdete v dokumentaci:

Další kroky

Gratulujeme! Dokončili jste kurz k vytvoření aplikace WinUI .

Následující odkazy obsahují další informace o vytváření aplikací pomocí WinUI a sady Windows App SDK:

  • Last updated on