Configuração do menu lateral esquerdo e carregamento de páginas da janela principal concluída

Posted on 2026年7月7日 by jack

Adicionar navegação

Adicionar menu lateral esquerdo à interface

Criar um novo projeto WinUI C++

Abrir o arquivo MainWindow.xaml

Substitua apenas a seção Grid interna por um NavigationView como mostrado abaixo (não substitua o arquivo inteiro)

<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)

A aparência da interface após executar o aplicativo é mostrada abaixo

Adicionar página em branco

Criar uma página vazia

Clique com o botão direito no nome do projeto → Adicionar Novo Item (Add New Item)

Acesse Visual C++ → WinUI → Modelo BlankPage.xaml de página vazia

Modifique a área Grid dentro de BlankPage.xaml como abaixo. Para diferenciar visualmente cada página, colocamos um TextBlock com um texto exclusivo em cada uma delas.

Page e Window são controles diferentes

    <Grid>
        <TextBlock Text="This is a blank page." 
HorizontalAlignment="Center" 
VerticalAlignment="Center" FontSize="24"/>
    </Grid>Code language: C++ (cpp)

Barra de navegação e carregamento de páginas

Definir página vazia padrão para a janela principal

Configure o controle Frame da janela principal para carregar por padrão a página vazia criada anteriormente

O Frame funciona de forma similar ao iframe no HTML: é uma área independente que carrega e exibe o conteúdo de outra página.

Abra o arquivo MainWindow.xaml.h

Remova a implementação do construtor no cabeçalho, mantendo apenas a declaração da função.

Ficará simplificado para: MainWindow();

Implemente a lógica do construtor no arquivo .cpp correspondente.

#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
{
    // A implementação do construtor fica no arquivo cpp para inicializar a interface e fazer navegação com segurança
    MainWindow::MainWindow()
    {
        InitializeComponent();
        // Fazer o Frame carregar e exibir a 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)

A função xaml_typename requer a inclusão do cabeçalho abaixo

#include <winrt/Windows.UI.Xaml.Interop.h>Code language: HTML, XML (xml)

A linha MainFrame().Navigate(xaml_typename()) executa a navegação para a BlankPage. Ao abrir a janela principal, o contêiner MainFrame à direita renderizará essa página em branco.