Cliquez sur les éléments de la barre de navigation gauche pour charger différentes pages

Au cours précédent, nous avons terminé d’afficher la barre latérale gauche, contenant un contrôle Frame. Lorsque la fenêtre principale se lance, ce Frame charge par défaut une page vierge. Cependant, cliquer sur les éléments du menu latéral gauche ne permet pas encore d’ouvrir d’autres pages. Dans cette leçon, nous allons implémenter cette fonctionnalité : cliquer sur différents menus de la barre latérale gauche permet d’ouvrir des pages (Page) distinctes.

Résultat final

Modifier les éléments de menu de la fenêtre principale

Modifier 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>Langage du code : HTML, XML (xml)

Principales modifications :

1. Ajouter un événement de changement de sélection sur NavigationView : SelectionChanged="OnNavViewSelectionChanged", déclenché lors du passage d’un élément de menu à un autre.
2. Ajout et modification de plusieurs entrées de menu : <NavigationViewItem Content="Play" Tag="PlayPage" Icon="Play"/>. Attention : Content correspond au nom affiché du menu, la chaîne Tag est le nom de la page cible, Icon utilise les icônes natives de WinUI.

Créer trois pages vierges : DashboardPage, AnalyticsPage, PlayPage

Ajouter un TextBlock dans le Grid de chaque page, avec un texte descriptif unique pour différencier visuellement chaque page.

  <Grid>
      <TextBlock Text="Dashboard Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
  </Grid>Langage du code : HTML, XML (xml)

    <Grid>
        <TextBlock Text="Analytics Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>Langage du code : HTML, XML (xml)

    <Grid>
        <TextBlock Text="Play Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>Langage du code : HTML, XML (xml)

Implémenter la fonction de basculement de page

Placer le curseur sur le nom de la fonction d’événement OnNavViewSelectionChanged dans le XAML, puis appuyer sur la touche raccourci F12. Visual Studio génère automatiquement cette fonction événementielle : une déclaration de fonction est créée dans le fichier .h (sans corps d’implémentation), puis le squelette d’implémentation est généré dans le fichier .cpp avec un saut automatique du curseur vers ce fichier ; vous n’avez pas besoin d’éditer manuellement l’en-tête.

Voici l’implémentation complète dans 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)
{
    // Récupérer l'élément de menu sélectionné
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Extraire la chaîne Tag
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Associer le Tag au type de page correspondant
    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;
    }

    // Naviguer vers la page dans le Frame
    MainFrame().Navigate(targetPage);
}Langage du code : C++ (cpp)

Il faut également inclure les espaces de noms et en-têtes en haut du fichier cpp

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;Langage du code : C++ (cpp)

Explication des lignes clés de la fonction événementielle

auto selectedItem = args.SelectedItem().as<NavigationViewItem>(); — Récupère l’élément de menu sur lequel l’utilisateur a cliqué

hstring tag = unbox_value<hstring>(selectedItem.Tag()); — Lit la propriété Tag de l’élément de menu, chaîne correspondant au nom de la page définie précédemment dans le XAML.

winrt::Windows::UI::Xaml::Interop::TypeName targetPage; — Déclare une variable destinée à stocker le type de la page, utilisée comme paramètre de l’appel de navigation MainFrame().Navigate(targetPage);.

    if (tag == L"DashboardPage")
    {
        targetPage = xaml_typename<AppWinui::DashboardPage>();
    }Langage du code : C++ (cpp)

On affecte à targetPage le type de page correspondant à chaque valeur de Tag.

MainFrame().Navigate(targetPage); — Exécute la navigation vers la page cible.

Code source complet

#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)
{
    // Récupérer l'élément de menu sélectionné
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Extraire la chaîne Tag
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Associer le Tag au type de page correspondant
    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;
    }

    // Naviguer vers la page dans le Frame
    MainFrame().Navigate(targetPage);
}
Langage du code : C++ (cpp)

Lien de téléchargement du code source

Cliquez sur les éléments de la barre de navigation gauche pour charger différentes pages