Klicke auf die Einträge der linken Navigationsleiste, um unterschiedliche Seiten zu laden

In der vorherigen Lektion haben wir die linke Seitenleiste fertiggestellt, die ein Frame-Steuerelement enthält. Beim Start des Hauptfensters lädt dieser Frame standardmäßig eine leere Seite. Wenn man aber jetzt Menüeinträge in der linken Leiste anklickt, werden noch keine anderen Seiten geöffnet. In dieser Lektion implementieren wir diese Funktion: Ein Klick auf unterschiedliche Menüpunkte der linken Seitenleiste lädt die dazugehörigen Seiten (Page).

Endergebnis

Menüeinträge des Hauptfensters anpassen

Bearbeite MainWindow.xaml

    <NavigationView x:Name="NavView" PaneDisplayMode="Left" SelectionChanged="OnNavViewSelectionChanged">
        
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Dashboard" Tag="DashboardPage" Icon="Home"/>
            <NavigationViewItem Content="Analytics" Tag="AnalyticsPage" Icon="Account"/>
            <NavigationViewItem Content="Play" Tag="PlayPage" Icon="Play"/>
        </NavigationView.MenuItems>

        <Frame x:Name="MainFrame"/>

    </NavigationView>Code-Sprache: HTML, XML (xml)

Wichtige Änderungen:

1. Dem NavigationView ein Auswahlwechsel-Ereignis hinzufügen: SelectionChanged="OnNavViewSelectionChanged". Dieses Ereignis wird ausgelöst, wenn zwischen Menüpunkten gewechselt wird.
2. Mehrere Menüeinträge hinzugefügt und angepasst: <NavigationViewItem Content="Play" Tag="PlayPage" Icon="Play"/>. Hinweis: Content ist der angezeigte Menütext, die Zeichenfolge im Tag gibt den Namen der Zielseite an, Icon nutzt eingebaute WinUI-Symbole.

Drei leere Seiten erstellen: DashboardPage, AnalyticsPage, PlayPage

In den Grid-Bereich jeder Seite ein TextBlock einfügen mit individuellem Beschreibungstext, um die Seiten optisch voneinander abzugrenzen.

  <Grid>
      <TextBlock Text="Dashboard Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
  </Grid>Code-Sprache: HTML, XML (xml)

    <Grid>
        <TextBlock Text="Analytics Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>Code-Sprache: HTML, XML (xml)

    <Grid>
        <TextBlock Text="Play Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>Code-Sprache: HTML, XML (xml)

Wechselfunktion implementieren

Setze den Cursor auf den Ereignisfunktionsnamen OnNavViewSelectionChanged im XAML und drücke die Tastenkombination F12. Visual Studio erstellt automatisch die Ereignisfunktion: Im Header-File (.h) wird nur die Funktionsdeklaration ohne Implementierung erzeugt, im passenden .cpp-File wird ein Implementierungsgerüst generiert und der Cursor springt automatisch dorthin. Du musst die Header-Datei nicht manuell bearbeiten.

Der folgende Code ist die fertige Implementierung in MainWindow.xaml.cpp.

void winrt::AppWinui::implementation::MainWindow::OnNavViewSelectionChanged(winrt::Microsoft::UI::Xaml::Controls::NavigationView const& sender, 
winrt::Microsoft::UI::Xaml::Controls::NavigationViewSelectionChangedEventArgs const& args)
{
    // Ausgewählten Menüeintrag abrufen
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Tag-Zeichenfolge auslesen
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Passenden Seitentyp zum Tag zuordnen
    if (tag == L"DashboardPage")
    {
        targetPage = xaml_typename<AppWinui::DashboardPage>();
    }
    else if (tag == L"AnalyticsPage")
    {
        targetPage = xaml_typename<AppWinui::AnalyticsPage>();
    }
    else if (tag == L"PlayPage")
    {
        targetPage = xaml_typename<AppWinui::PlayPage>();
    }
    else
    {
        return;
    }

    // Navigation im Frame ausführen
    MainFrame().Navigate(targetPage);
}Code-Sprache: C++ (cpp)

Zusätzlich müssen am Anfang der cpp-Datei die passenden Namespaces und Header eingebunden werden

using namespace Microsoft::UI::Xaml;

#include "BlankPage.xaml.h"
#include "DashboardPage.xaml.h"
#include "AnalyticsPage.xaml.h"
#include "PlayPage.xaml.h"
#include <winrt/Windows.UI.Xaml.Interop.h>
using namespace winrt::Microsoft::UI::Xaml::Controls;Code-Sprache: C++ (cpp)

Erläuterung der zentralen Code-Zeilen der Ereignisfunktion

auto selectedItem = args.SelectedItem().as<NavigationViewItem>(); — Holt den Menüpunkt, auf den der Benutzer geklickt hat

hstring tag = unbox_value<hstring>(selectedItem.Tag()); — Liest den Wert der Tag-Eigenschaft des Menüeintrags, also die Zeichenfolge mit dem Namen der Zielseite, die wir zuvor im XAML festgelegt haben.

winrt::Windows::UI::Xaml::Interop::TypeName targetPage; — Deklariert eine Variable zur Speicherung des Seitentyps, die später als Parameter für den Aufruf MainFrame().Navigate(targetPage); zur Navigation verwendet wird.

    if (tag == L"DashboardPage")
    {
        targetPage = xaml_typename<AppWinui::DashboardPage>();
    }Code-Sprache: C++ (cpp)

Je nach übereinstimmendem Tag wird der passende Seitentyp der Variable targetPage zugewiesen.

MainFrame().Navigate(targetPage); — Führt schließlich den Seitenwechsel durch.

Vollständiger Quellcode

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

#include "BlankPage.xaml.h"
#include "DashboardPage.xaml.h"
#include "AnalyticsPage.xaml.h"
#include "PlayPage.xaml.h"
#include <winrt/Windows.UI.Xaml.Interop.h>
using namespace winrt::Microsoft::UI::Xaml::Controls;


// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace winrt::AppWinui::implementation
{

    MainWindow::MainWindow()
    {
        InitializeComponent();

        MainFrame().Navigate(xaml_typename<AppWinui::BlankPage>());
    }

    int32_t MainWindow::MyProperty()
    {
        throw hresult_not_implemented();
    }

    void MainWindow::MyProperty(int32_t /* value */)
    {
        throw hresult_not_implemented();
    }
}

void winrt::AppWinui::implementation::MainWindow::OnNavViewSelectionChanged(winrt::Microsoft::UI::Xaml::Controls::NavigationView const& sender,
 winrt::Microsoft::UI::Xaml::Controls::NavigationViewSelectionChangedEventArgs const& args)
{
    // Ausgewählten Menüeintrag abrufen
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Tag-Zeichenfolge auslesen
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Passenden Seitentyp zum Tag zuordnen
    if (tag == L"DashboardPage")
    {
        targetPage = xaml_typename<AppWinui::DashboardPage>();
    }
    else if (tag == L"AnalyticsPage")
    {
        targetPage = xaml_typename<AppWinui::AnalyticsPage>();
    }
    else if (tag == L"PlayPage")
    {
        targetPage = xaml_typename<AppWinui::PlayPage>();
    }
    else
    {
        return;
    }

    // Navigation im Frame ausführen
    MainFrame().Navigate(targetPage);
}
Code-Sprache: C++ (cpp)

Download-Link für den vollständigen Quellcode

Klicke auf die Einträge der linken Navigationsleiste, um unterschiedliche Seiten zu laden