Haz clic en los elementos de la barra de navegación izquierda para cargar distintas páginas

En la lección anterior terminamos de implementar la barra lateral izquierda, la cual contiene un control Frame. Al abrir la ventana principal, este Frame carga una página vacía por defecto. Sin embargo, al pulsar los elementos del menú lateral izquierdo todavía no se abren otras páginas. En esta lección vamos a desarrollar esta funcionalidad: al hacer clic en diferentes opciones del menú izquierdo, se cargarán distintas páginas (Page).

Resultado final

Modificar los elementos del menú de la ventana principal

Edita 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>Lenguaje del código: HTML, XML (xml)

Cambios principales:

1. Agregar un evento de cambio de selección en NavigationView: SelectionChanged="OnNavViewSelectionChanged". Este evento se dispara cada vez que se cambia el elemento seleccionado del menú.
2. Se añaden y modifican varios elementos de menú: <NavigationViewItem Content="Play" Tag="PlayPage" Icon="Play"/>. Ten en cuenta: Content es el nombre visible del menú, la cadena Tag corresponde al nombre de la página destino e Icon usa iconos nativos de WinUI.

Crea tres páginas vacías: DashboardPage, AnalyticsPage, PlayPage

Dentro del Grid de cada página agrega un TextBlock con un texto descriptivo distinto para diferenciar cada una visualmente.

  <Grid>
      <TextBlock Text="Dashboard Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
  </Grid>Lenguaje del código: HTML, XML (xml)

    <Grid>
        <TextBlock Text="Analytics Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>Lenguaje del código: HTML, XML (xml)

    <Grid>
        <TextBlock Text="Play Page" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>Lenguaje del código: HTML, XML (xml)

Implementar la función de cambio de página

Coloca el cursor encima del nombre del evento OnNavViewSelectionChanged en el XAML y pulsa la tecla rápida F12. Visual Studio generará automáticamente esta función de evento: creará la declaración en el archivo .h (sin cuerpo de implementación) y el esqueleto de código en el archivo .cpp, saltando directamente a este último; no necesitas editar manualmente el encabezado.

A continuación el código de implementación completo en 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)
{
    // Obtener el elemento de menú seleccionado
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Extraer la cadena del Tag
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Asociar el Tag al tipo de página correspondiente
    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;
    }

    // Navegar a la página mediante el Frame
    MainFrame().Navigate(targetPage);
}Lenguaje del código: C++ (cpp)

Además debes incluir los espacios de nombres y encabezados al principio del archivo 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;Lenguaje del código: C++ (cpp)

Explicación de los fragmentos clave de la función de evento

auto selectedItem = args.SelectedItem().as<NavigationViewItem>(); — Recupera el elemento del menú que el usuario ha pulsado

hstring tag = unbox_value<hstring>(selectedItem.Tag()); — Lee el valor de la propiedad Tag del elemento del menú, la cadena con el nombre de la página que definimos anteriormente en el XAML.

winrt::Windows::UI::Xaml::Interop::TypeName targetPage; — Declara una variable para almacenar el tipo de página, usada como parámetro para la llamada de navegación posterior MainFrame().Navigate(targetPage);.

    if (tag == L"DashboardPage")
    {
        targetPage = xaml_typename<AppWinui::DashboardPage>();
    }Lenguaje del código: C++ (cpp)

Según cada valor distinto de Tag, asignamos el tipo de página correspondiente a targetPage.

MainFrame().Navigate(targetPage); — Ejecuta finalmente la navegación entre páginas.

Código fuente 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)
{
    // Obtener el elemento de menú seleccionado
    auto selectedItem = args.SelectedItem().as<NavigationViewItem>();
    if (!selectedItem) return;

    // Extraer la cadena del Tag
    hstring tag = unbox_value<hstring>(selectedItem.Tag());
    winrt::Windows::UI::Xaml::Interop::TypeName targetPage;

    // Asociar el Tag al tipo de página correspondiente
    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;
    }

    // Navegar a la página mediante el Frame
    MainFrame().Navigate(targetPage);
}
Lenguaje del código: C++ (cpp)

Enlace de descarga del código fuente completo

Haz clic en los elementos de la barra de navegación izquierda para cargar distintas páginas