Na aula anterior, finalizamos a exibição da barra lateral esquerda, que contém um controle Frame. Ao abrir a janela principal, esse Frame carrega uma página vazia por padrão. Porém, ao clicar nos itens do menu lateral esquerdo, ainda não conseguimos abrir outras páginas. Nesta aula, vamos implementar essa funcionalidade: ao clicar em menus diferentes da barra lateral esquerda, cada um carrega uma página distinta (Page).
Resultado final
Modificar os itens de menu da janela principal
Edite o arquivo 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)Principais alterações:
- Adicionar um evento de mudança de seleção no NavigationView:
SelectionChanged="OnNavViewSelectionChanged". Esse evento é acionado sempre que trocamos o item selecionado do menu. - Adição e ajuste de vários itens de menu:
<NavigationViewItem Content="Play" Tag="PlayPage" Icon="Play"/>. Observação: Content é o nome visível do menu, a string Tag corresponde ao nome da página de destino e o Icon usa ícones nativos do WinUI.
Crie três páginas em branco: DashboardPage, AnalyticsPage, PlayPage
Dentro do Grid de cada página, adicione um TextBlock com um texto descritivo exclusivo para diferenciar visualmente cada página.
<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)Implementar a função de troca de páginas
Posicione o cursor sobre o nome da função de evento OnNavViewSelectionChanged no XAML e pressione a tecla de atalho F12. O Visual Studio vai gerar automaticamente essa função de evento: cria apenas a declaração no arquivo .h (sem o corpo da implementação) e monta o trecho de código no arquivo .cpp, movendo o cursor diretamente para ele; você não precisa editar o cabeçalho manualmente.
Abaixo está a implementação completa no arquivo 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)
{
// Obter o item de menu selecionado
auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
if (!selectedItem) return;
// Extrair a string da Tag
hstring tag = unbox_value<hstring>(selectedItem.Tag());
winrt::Windows::UI::Xaml::Interop::TypeName targetPage;
// Associar a Tag ao tipo de página correspondente
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;
}
// Executar a navegação da Frame para a página alvo
MainFrame().Navigate(targetPage);
}Code language: C++ (cpp)Além disso, é necessário incluir os namespaces e cabeçalhos no início do arquivo 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;Code language: C++ (cpp)Explicação dos trechos cruciais da função de evento
auto selectedItem = args.SelectedItem().as<NavigationViewItem>(); — Recupera o item de menu que o usuário clicou
hstring tag = unbox_value<hstring>(selectedItem.Tag()); — Lê o valor da propriedade Tag do item do menu, a string com o nome da página configurada anteriormente no XAML.
winrt::Windows::UI::Xaml::Interop::TypeName targetPage; — Declara uma variável para armazenar o tipo da página, usada como parâmetro para a chamada de navegação MainFrame().Navigate(targetPage);.
if (tag == L"DashboardPage")
{
targetPage = xaml_typename<AppWinui::DashboardPage>();
}Code language: C++ (cpp)Para cada valor diferente de Tag, atribuímos o tipo da página correspondente à variável targetPage.
MainFrame().Navigate(targetPage); — Executa a troca de páginas no final.
Código fonte completo
#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)
{
// Obter o item de menu selecionado
auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
if (!selectedItem) return;
// Extrair a string da Tag
hstring tag = unbox_value<hstring>(selectedItem.Tag());
winrt::Windows::UI::Xaml::Interop::TypeName targetPage;
// Associar a Tag ao tipo de página correspondente
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;
}
// Executar a navegação da Frame para a página alvo
MainFrame().Navigate(targetPage);
}
Code language: C++ (cpp)Link para download do código fonte completo
Clique nos itens da barra de navegação esquerda para carregar páginas diferentes