Agregar navegación
Agregar menú lateral izquierdo a la interfaz
Crear un nuevo proyecto WinUI C++
Abrir MainWindow.xaml
Reemplazar solo la sección interna Grid por un NavigationView como se muestra a continuación (no reemplace todo el archivo)
<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>Lenguaje del código: HTML, XML (xml)
Así se verá la interfaz después de ejecutar el programa
Agregar página vacía
Crear una página vacía
Hacer clic derecho en el nombre del proyecto → Agregar nuevo elemento (Add New Item)
Seleccionar Visual C++ → WinUI → Plantilla BlankPage.xaml de página vacía
Modificar la parte Grid de BlankPage.xaml como sigue. Para diferenciar cada página visualmente, agregamos un TextBlock con texto distinto en cada una.
Page y Window son controles diferentes
<Grid>
<TextBlock Text="This is a blank page."
HorizontalAlignment="Center"
VerticalAlignment="Center" FontSize="24"/>
</Grid>Lenguaje del código: C++ (cpp)
Barra de navegación y carga de páginas
Establecer página vacía predeterminada para la ventana principal
Configurar el control Frame de la ventana principal para que cargue por defecto la página vacía que creamos antes
El Frame es similar al iframe de HTML: es una zona independiente donde se carga y muestra el contenido de otra página.
Abrir MainWindow.xaml.h
Elimina la implementación del constructor dentro del archivo de cabecera, dejando solo su declaración.
Quedará así: MainWindow();
Implementar el constructor en el archivo .cpp correspondiente.
#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
{
// La implementación del constructor se coloca en el archivo cpp para inicializar la interfaz y navegar de forma segura
MainWindow::MainWindow()
{
InitializeComponent();
// Hacer que el Frame cargue y muestre 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();
}
}
Lenguaje del código: PHP (php)
Para usar xaml_typename es necesario incluir el siguiente encabezado
#include <winrt/Windows.UI.Xaml.Interop.h>Lenguaje del código: HTML, XML (xml)La línea MainFrame().Navigate(xaml_typename()) realiza la navegación hacia BlankPage. Al abrir la ventana principal, el contenedor MainFrame de la derecha mostrará esta página vacía.
Configuración del menú lateral izquierdo y carga de páginas de la ventana principal completada