Guia de Controles WinUI 3 C++ — Navegação e Abas

Controles relacionados à navegação e abas no WinUI 3

Frame Quadro de navegação de páginas (hospeda Page para realizar trocas de página)
Page Contêiner de página independente
NavigationView Visão de navegação da barra lateral
NavigationViewItem Item do menu de navegação
NavigationViewItemHeader Título de grupo de navegação
NavigationViewItemSeparator Linha separadora de navegação
TabView Contêiner de múltiplas abas
TabViewItem Aba individual
Pivot Controle de abas deslizantes horizontais
PivotItem Item de página do Pivot
SplitView Visão dividida com gaveta lateral
SplitViewPaneInfo Configuração do painel lateral do SplitView
BreadcrumbBar Barra de navegação de caminho (migalhas de pão)
BreadcrumbBarItem Nó do caminho de migalhas de pão

Já comentamos sobre painéis laterais anteriormente, também utilizamos Frame, Page e os controles de navegação. A seguir, farei uma demonstração dos controles a partir do TabView.

O vídeo abaixo demonstra o uso desses controles: barra lateral esquerda e abas.

<?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 e SplitViewPaneInfo -->
        <SplitView x:Name="DemoSplitView"
                   DisplayMode="CompactInline"
                   CompactPaneLength="52"
                   OpenPaneLength="260"
                   IsPaneOpen="True">

            <!-- Painel lateral do SplitView -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Menu Lateral" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Abrir demonstração do TabView"/>
                    <Button x:Name="BtnShowPivot" Content="Abrir demonstração do Pivot"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- Área de conteúdo principal do 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="Demonstração de múltiplas abas TabView" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Aba Um">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Conteúdo dentro da Aba 1"/>
                                    <Button Content="Botão exemplo da Aba 1"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Aba Dois">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Conteúdo estilizado dentro da Aba 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Aba Três">
                                <TextBox PlaceholderText="Caixa de entrada na Aba 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Demonstração deslizante horizontal Pivot" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Página deslizante A">
                                <TextBlock Margin="12" Text="Conteúdo da página deslizante horizontal A"/>
                            </PivotItem>
                            <PivotItem Header="Página deslizante B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Conteúdo estilizado da página deslizante B"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Página deslizante C">
                                <ToggleSwitch Header="Opção alternável na página deslizante C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code language: HTML, XML (xml)

Guia de Controles WinUI 3 C++ — Navegação e Abas