Руководство по элементам управления WinUI 3 C++ — Навигация и вкладки

Элементы управления WinUI 3 для навигации и вкладок

Frame Фрейм навигации по страницам (содержит Page для переходов между страницами)
Page Независимый контейнер страницы
NavigationView Боковая панель навигации
NavigationViewItem Пункт меню навигации
NavigationViewItemHeader Заголовок группы навигации
NavigationViewItemSeparator Разделитель навигации
TabView Контейнер с множеством вкладок
TabViewItem Отдельная вкладка
Pivot Горизонтально прокручиваемые вкладки
PivotItem Страница внутри Pivot
SplitView Разделенное окно с выдвижной боковой панелью
SplitViewPaneInfo Настройки боковой панели SplitView
BreadcrumbBar Хлебные крошки — панель пути навигации
BreadcrumbBarItem Узел пути хлебных крошек

Боковые панели мы уже разбирали ранее, Frame, Page и элементы навигации также использовали. Далее покажу пример работы элементов начиная с TabView.

Видео ниже демонстрирует работу этих элементов: левая боковая панель и вкладки.

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

            <!-- Боковая панель SplitView -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Боковое меню" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Открыть демо TabView"/>
                    <Button x:Name="BtnShowPivot" Content="Открыть демо Pivot"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- Основная область контента 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" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Вкладка 1">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Содержимое вкладки 1"/>
                                    <Button Content="Пример кнопки вкладки 1"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Вкладка 2">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Стилизованное содержимое вкладки 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Вкладка 3">
                                <TextBox PlaceholderText="Поле ввода на вкладке 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Демо горизонтальной прокрутки Pivot" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Прокручиваемая страница A">
                                <TextBlock Margin="12" Text="Содержимое горизонтально прокручиваемой страницы A"/>
                            </PivotItem>
                            <PivotItem Header="Прокручиваемая страница B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Стилизованное содержимое прокручиваемой страницы B"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Прокручиваемая страница C">
                                <ToggleSwitch Header="Переключатель на прокручиваемой странице C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code language: HTML, XML (xml)

Руководство по элементам управления WinUI 3 C++ — Навигация и вкладки