Guía de controles WinUI 3 C++ – Navegación y pestañas

Controles relacionados con la navegación y las pestañas en WinUI 3

Frame Marco de navegación de páginas (alberga Page para realizar saltos entre páginas)
Page Contenedor de página independiente
NavigationView Vista de navegación de barra lateral
NavigationViewItem Elemento del menú de navegación
NavigationViewItemHeader Título de grupo de navegación
NavigationViewItemSeparator Línea separadora de navegación
TabView Contenedor de varias pestañas
TabViewItem Pestaña individual
Pivot Control de pestañas deslizante horizontal
PivotItem Elemento de página de Pivot
SplitView Vista dividida con cajón lateral
SplitViewPaneInfo Configuración del panel lateral de SplitView
BreadcrumbBar Barra de navegación de rutas tipo migas de pan
BreadcrumbBarItem Nodo de ruta de migas de pan

Ya hemos hablado anteriormente sobre los paneles laterales, también hemos usado Frame, Page y los controles relacionados con la navegación. A continuación mostraré una demostración de los controles a partir de TabView.

El siguiente vídeo muestra el uso de estos controles: barra lateral izquierda y pestañas.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <Grid>
        <!-- SplitView y SplitViewPaneInfo -->
        <SplitView x:Name="DemoSplitView"
                   DisplayMode="CompactInline"
                   CompactPaneLength="52"
                   OpenPaneLength="260"
                   IsPaneOpen="True">

            <!-- Panel lateral de SplitView -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Menú lateral" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Abrir demo de TabView"/>
                    <Button x:Name="BtnShowPivot" Content="Abrir demo de Pivot"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- Área de contenido principal de SplitView -->
            <SplitView.Content>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <StackPanel x:Name="MainContentPanel" Grid.Row="1" Margin="8" Spacing="20" VerticalAlignment="Top">
             
                        <TextBlock Text="Demo multipestañas TabView" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Pestaña Uno">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Contenido dentro de la pestaña 1"/>
                                    <Button Content="Botón de ejemplo pestaña 1"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Pestaña Dos">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Contenido con estilo en la pestaña 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Pestaña Tres">
                                <TextBox PlaceholderText="Caja de entrada en la pestaña 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Demo deslizante horizontal Pivot" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Página deslizante A">
                                <TextBlock Margin="12" Text="Contenido de la página deslizante horizontal A"/>
                            </PivotItem>
                            <PivotItem Header="Página deslizante B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Contenido con estilo de la página deslizante B"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Página deslizante C">
                                <ToggleSwitch Header="Opción alternable en la página deslizante C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Lenguaje del código: HTML, XML (xml)

Guía de controles WinUI 3 C++ – Navegación y pestañas