Guide des contrôles WinUI 3 C++ — Navigation et onglets

Contrôles liés à la navigation et aux onglets dans WinUI 3

Frame Cadre de navigation de page (accueille des Page pour réaliser des sauts de page)
Page Support de page indépendante
NavigationView Vue de navigation latérale
NavigationViewItem Élément de menu de navigation
NavigationViewItemHeader Titre de groupe de navigation
NavigationViewItemSeparator Ligne de séparation de navigation
TabView Conteneur à plusieurs onglets
TabViewItem Onglet individuel
Pivot Onglets à défilement horizontal
PivotItem Élément de page Pivot
SplitView Vue à volet latéral coulissant
SplitViewPaneInfo Configuration du volet latéral de SplitView
BreadcrumbBar Barre de navigation fil d’Ariane
BreadcrumbBarItem Nœud du chemin de fil d’Ariane

Nous avons déjà évoqué les volets latéraux précédemment, nous avons également utilisé Frame, Page et les contrôles liés à la navigation. Ci-dessous, je vais présenter une démonstration des contrôles à partir de TabView.

La vidéo ci-dessous illustre l’utilisation de ces contrôles : volet latéral gauche et onglets.

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

            <!-- Volet latéral de SplitView -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Menu Latéral" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Ouvrir la démo TabView"/>
                    <Button x:Name="BtnShowPivot" Content="Ouvrir la démo Pivot"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- Contenu 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="Démonstration multi-onglets TabView" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Onglet Un">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Contenu de l'onglet 1"/>
                                    <Button Content="Bouton exemple onglet 1"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Onglet Deux">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Contenu stylisé de l'onglet 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Onglet Trois">
                                <TextBox PlaceholderText="Zone de saisie dans l'onglet 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Démonstration Pivot à défilement horizontal" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Page coulissante A">
                                <TextBlock Margin="12" Text="Contenu de la page coulissante A"/>
                            </PivotItem>
                            <PivotItem Header="Page coulissante B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Contenu stylisé de la page coulissante B"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Page coulissante C">
                                <ToggleSwitch Header="Option activable sur la page coulissante C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Langage du code : HTML, XML (xml)

Guide des contrôles WinUI 3 C++ — Navigation et onglets