Tambah Navigasi
Tambah Menu Sisi Kiri ke Tampilan Antarmuka
Buat proyek WinUI C++ baru
Buka file MainWindow.xaml
Ganti bagian Grid di dalamnya dengan NavigationView seperti di bawah ini (hanya ganti bagian Grid, jangan ganti seluruh file)
<NavigationView x:Name="NavView" PaneDisplayMode="Left">
<NavigationView.MenuItems>
<NavigationViewItem Content="Dashboard" Tag="DashboardPage"
Icon="Account"/>
<NavigationViewItem Content="Account" Tag="AnalyticsPage"
Icon="Add"/>
</NavigationView.MenuItems>
<Frame x:Name="MainFrame"/>
</NavigationView>Code language: HTML, XML (xml)
Tampilan setelah menjalankan aplikasi seperti gambar di bawah
Tambah Halaman Kosong
Buat Halaman Kosong
Klik kanan nama proyek → Tambah Item Baru (Add New Item)
Cari Visual C++ → WinUI → Template BlankPage.xaml halaman kosong
Ubah bagian Grid di dalam BlankPage.xaml seperti di bawah. Agar tiap halaman mudah dibedakan, pasang TextBlock dengan tulisan berbeda di tiap halaman.
Page dan Window adalah kontrol yang berbeda
<Grid>
<TextBlock Text="This is a blank page."
HorizontalAlignment="Center"
VerticalAlignment="Center" FontSize="24"/>
</Grid>Code language: C++ (cpp)
Bar Navigasi & Pemuatan Halaman
Atur Halaman Kosong Default untuk Jendela Utama
Konfigurasikan kontrol Frame di jendela utama agar secara otomatis memuat halaman kosong yang sudah dibuat
Frame konsepnya mirip iframe di HTML, yaitu area terpisah untuk memuat konten halaman lain.
Buka file MainWindow.xaml.h
Hapus bagian implementasi konstruktor di header, biarkan hanya deklarasi saja.
Jadikan hanya seperti ini: MainWindow();
Implementasikan logika konstruktor di file .cpp.
#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 <winrt/Windows.UI.Xaml.Interop.h>
// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.
namespace winrt::App5::implementation
{
// Implementasi konstruktor diletakkan di file cpp agar bisa inisialisasi UI dan navigasi halaman dengan aman
MainWindow::MainWindow()
{
InitializeComponent();
// Perintahkan Frame memuat dan menampilkan BlankPage
MainFrame().Navigate(xaml_typename<App5::BlankPage>());
}
int32_t MainWindow::MyProperty()
{
throw hresult_not_implemented();
}
void MainWindow::MyProperty(int32_t /* value */)
{
throw hresult_not_implemented();
}
}
Code language: PHP (php)
Fungsi xaml_typename memerlukan header berikut untuk dimasukkan:
#include <winrt/Windows.UI.Xaml.Interop.h>Code language: HTML, XML (xml)Kode MainFrame().Navigate(xaml_typename()) berfungsi berpindah ke halaman BlankPage. Saat jendela utama dibuka, area MainFrame di sebelah kanan akan menampilkan halaman kosong tersebut.
Pengaturan menu sisi kiri dan pemuatan halaman jendela utama selesai