네비게이션 추가
화면에 왼쪽 사이드 메뉴 추가하기
새 WinUI C++ 프로젝트를 생성합니다
MainWindow.xaml 파일을 엽니다
안쪽 Grid 부분만 아래 NavigationView로 교체합니다 (파일 전체를 덮어쓰지 마세요)
<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)

실행 후 화면은 아래와 같습니다

빈 페이지 추가
빈 페이지 생성하기
프로젝트 이름 우클릭 → 새 항목 추가(Add New Item)
Visual C++ → WinUI → BlankPage.xaml 빈 페이지 템플릿 선택
BlankPage.xaml 내부 Grid 부분을 아래처럼 수정합니다. 페이지 구분이 쉽도록 각 페이지에 다른 텍스트를 보여주는 TextBlock을 배치합니다.
Page와 Window는 서로 다른 컨트롤입니다
<Grid>
<TextBlock Text="This is a blank page."
HorizontalAlignment="Center"
VerticalAlignment="Center" FontSize="24"/>
</Grid>Code language: C++ (cpp)

네비게이션 바 및 페이지 로딩
메인 창 기본 페이지 설정
메인 창의 Frame 컨트롤에 위에서 만든 빈 페이지를 기본으로 불러오도록 설정합니다
Frame은 HTML의 iframe과 유사한 개념으로, 독립적인 영역에 다른 페이지 내용을 불러와 표시합니다.
MainWindow.xaml.h 파일 열기
생성자 구현 부분을 지우고 선언만 남깁니다.

MainWindow();

.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
{
// 생성자 구현을 cpp에 작성해야 UI 초기화와 페이지 이동을 안전하게 처리할 수 있습니다
MainWindow::MainWindow()
{
InitializeComponent();
// Frame이 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)

xaml_typename을 사용하려면 아래 헤더를 포함해야 합니다
#include <winrt/Windows.UI.Xaml.Interop.h>Code language: HTML, XML (xml)
MainFrame().Navigate(xaml_typename()) 코드는 BlankPage로 이동하는 로직입니다. 메인 창을 실행하면 오른쪽 MainFrame 영역에 해당 빈 페이지가 출력됩니다.

왼쪽 메뉴 및 메인 창 페이지 로딩 설정 완료
Previous: 버튼 클릭 및 속성 바인딩 구현