Klik item di bilah navigasi kiri untuk memuat halaman yang berbeda - Winui C++

Di pelajaran sebelumnya kita sudah membuat tampilan sidebar kiri yang berisi kontrol Frame. Saat jendela utama dibuka, Frame ini akan memuat halaman kosong secara bawaan. Namun saat ini jika klik menu di sidebar kiri, halaman lain belum bisa terbuka. Di pelajaran ini kita akan menyelesaikan fitur tersebut: klik menu yang berbeda di sidebar kiri akan membuka halaman (Page) yang berbeda pula.

Hasil akhir program

Ubah item menu pada jendela utama

Buka dan edit file 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 language: HTML, XML (xml)

Perubahan utama:

Tambahkan event perubahan pilihan pada NavigationView: SelectionChanged=”OnNavViewSelectionChanged, event ini akan berjalan setiap kali pengguna berpindah menu.
Tambahkan dan ubah beberapa item menu: <NavigationViewItem Content=”Play” Tag=”PlayPage” Icon=”Play”/>. Catatan: Content adalah teks yang terlihat di menu, string Tag adalah nama halaman tujuan, Icon menggunakan ikon bawaan WinUI.

Buat tiga halaman kosong baru: DashboardPage, AnalyticsPage, PlayPage

Di dalam Grid tiap halaman tambahkan TextBlock dengan tulisan yang berbeda-beda agar tiap halaman mudah dibedakan.

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

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

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

Implementasi fungsi ganti halaman

Letakkan kursor di atas nama fungsi event OnNavViewSelectionChanged pada XAML lalu tekan tombol pintas F12. Visual Studio akan otomatis membuat fungsi event ini: deklarasi fungsi akan dibuat di file .h (tanpa isi implementasi), sedangkan kerangka implementasi dibuat di file .cpp dan kursor akan langsung pindah ke cpp, Anda tidak perlu edit header secara manual.

Berikut kode implementasi lengkap di 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)
{
    // Ambil item menu yang dipilih pengguna
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Ambil string dari properti Tag
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Cocokkan nilai Tag dengan tipe halaman yang sesuai
    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;
    }

    // Jalankan navigasi halaman melalui Frame
    MainFrame().Navigate(targetPage);
}Code language: C++ (cpp)

Selain itu di bagian atas file cpp perlu menambahkan namespace dan header yang dibutuhkan

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 language: C++ (cpp)

Penjelasan baris penting fungsi event

auto selectedItem = args.SelectedItem().as<NavigationViewItem>(); — mendapatkan item menu yang diklik pengguna

hstring tag = unbox_value<hstring>(selectedItem.Tag()); — membaca nilai properti Tag dari item menu, yaitu string nama halaman yang kita atur di XAML sebelumnya.

winrt::Windows::UI::Xaml::Interop::TypeName targetPage; — deklarasi variabel untuk menyimpan tipe halaman, nantinya dipakai sebagai parameter pada MainFrame().Navigate(targetPage); untuk pindah halaman.

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

Berdasarkan string Tag yang berbeda, kita tetapkan tipe halaman yang sesuai ke variabel targetPage.

MainFrame().Navigate(targetPage); — mengeksekusi perpindahan halaman.

Kode sumber lengkap

#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)
{
    // Ambil item menu yang dipilih pengguna
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Ambil string dari properti Tag
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Cocokkan nilai Tag dengan tipe halaman yang sesuai
    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;
    }

    // Jalankan navigasi halaman melalui Frame
    MainFrame().Navigate(targetPage);
}
Code language: C++ (cpp)