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.

Ve AllNotesPage je kolekce existujících poznámek a tlačítko Nová poznámka.

  • Kliknutím na existující poznámku přejdete na stránku poznámky a načte se poznámka, na kterou jste 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 tento kurz 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 – 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řidat obslužné rutiny událostí v kroku v poznámce.)

    <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, na který 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řetížení 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 v ItemsView, je poznámka vybrána, 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 tak, aby se místo výběru dalo kliknout na položku jako tlačítko.

Návod

Kód pro tento kurz 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í: navigation – 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 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. V AllNotesPage.xaml.cs vyhledejte metodu ItemsView_ItemInvoked . (Pokud Visual Studio pro vás ho nevytvořil, 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 jinou 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. Aktualizujte přepsání metody OnNavigatedTo tak, aby zpracovávala 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 3 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 svázané s vlastností Frame.CanGoBack.

  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é je tato vlastnost IsBackButtonEnabled vázána na vlastnost Frame.CanGoBack, takže tlačítko Zpět je povoleno pouze v případě, že rám může přejít zpět.

    Nakonec se přidá obslužná rutina události BackRequested . Tady umístíte kód pro navigaci zpět.

  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. Po odstranění poznámky aktualizujte metodu DeleteButton_Click obslužné rutiny události voláním metody Frame.CanGoBack.

    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 v NotePage voláte Frame.GoBack, zatímco v MainWindow jste volali rootFrame.GoBack. Je to proto, že třída Page má vlastnost Frame, 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 .

Aby byly věci jednoduché a představily některé základní koncepty, tento kurz se zaměřil na jednoduchost nad efektivitou a zavedl funkce na nejzákladnější úrovni. Takže zatímco aplikace funguje, je několik věcí, které je možné vylepšit.

Doporučujeme pokračovat v jednom z následujících kurzů, abyste se dozvěděli více:

  • Poznámky WinUI – část 2 – Vysvětluje více funkcí souvisejících s navigačními a datovými vazbami. Aplikaci aktualizujete tak, aby fungovala efektivněji a současně zachováte stejnou základní architekturu.

    OR

  • Datová vazba, vkládání závislostí a jednotkové testování ve WinUI – Ukazuje, jak implementovat datovou vazbu, vkládání závislostí a jednotkové testování pomocí návrhového vzoru Model-View-ViewModel (MVVM). Změníte modely aplikace a zobrazení tak, aby využívaly MVVM Toolkit.

  • Last updated on