WinUI 3 C++ Steuerelemente Handbuch – Navigation und Tab-Reiter

Steuerelemente in WinUI 3 für Navigation und Tabs

Frame Navigationsrahmen für Seiten (hält Page-Elemente zum Seitenwechsel)
Page Eigenständiger Seitencontainer
NavigationView Seitenleisten-Navigationsansicht
NavigationViewItem Menüeintrag der Navigation
NavigationViewItemHeader Gruppentitel für Navigationseinträge
NavigationViewItemSeparator Trennlinie in der Navigation
TabView Mehr-Tab-Container
TabViewItem Einzelner Tab-Reiter
Pivot Horizontal scrollbare Reiter-Seiten
PivotItem Einzelseite des Pivot-Steuerelements
SplitView Seitenausziehbare Split-Ansicht
SplitViewPaneInfo Konfiguration für den Seitenbereich von SplitView
BreadcrumbBar Brotkrumen-Navigationsleiste (Pfadnavigation)
BreadcrumbBarItem Einzelner Knoten im Brotkrumenpfad

Über Seitenleisten haben wir bereits gesprochen, Frame, Page und die Navigationssteuerelemente wurden ebenfalls vorgestellt. Im Folgenden zeige ich eine Demo der Steuerelemente ab TabView.

Das folgende Video demonstriert die Nutzung dieser Steuerelemente: linke Seitenleiste und Tab-Reiter.

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

            <!-- Seitenbereich von SplitView -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Seitenmenü" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="TabView-Demo öffnen"/>
                    <Button x:Name="BtnShowPivot" Content="Pivot-Demo öffnen"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- Hauptinhalt von 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="TabView Multi-Tab Demo" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Reiter Eins">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Inhalt im Reiter 1"/>
                                    <Button Content="Beispielbutton Reiter 1"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Reiter Zwei">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Gestalteter Inhalt im Reiter 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Reiter Drei">
                                <TextBox PlaceholderText="Eingabefeld im Reiter 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Pivot Horizontal-Scroll-Demo" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Scroll-Seite A">
                                <TextBlock Margin="12" Text="Inhalt der horizontal scrollbaren Seite A"/>
                            </PivotItem>
                            <PivotItem Header="Scroll-Seite B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Gestalteter Inhalt der scrollbaren Seite B"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Scroll-Seite C">
                                <ToggleSwitch Header="Umschaltoption auf scrollbarer Seite C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code-Sprache: HTML, XML (xml)

WinUI 3 C++ Steuerelemente Handbuch – Navigation und Tab-Reiter