TabView

Статья
07/13/2023

Элемент управления TabView позволяет отобразить набор вкладок и их содержимое. Элементы TabView удобно использовать, чтобы отображать несколько страниц (или документов) содержимого, в то же время предоставляя пользователю возможность изменять порядок вкладок, а также открывать новые или закрывать имеющиеся вкладки.

Пример элемента TabView

Получение WinUI

Элемент управления TabView требует WinUI, пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений Windows. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI.

API WinUI: класс TabView, класс TabViewItem

Совет

В этом документе мы используем псевдоним muxc в XAML для представления API WinUI, включенных в наш проект. Мы добавили его для нашего элемента Page: xmlns:muxc="using:Microsoft.UI.Xaml.Controls".

В коде программной части мы также используем псевдоним muxc в C# для представления API WinUI, включенных в наш проект. Мы добавили оператор using в верхней части файла: using muxc = Microsoft.UI.Xaml.Controls;.

Выбор правильного элемента управления

Как правило, интерфейсы UIs с вкладками входят в один из двух различных стилей, которые отличаются в функции и внешнем виде: статические вкладки часто находятся в окнах параметров. На них располагается набор страниц в фиксированном порядке, которые обычно содержат предопределенное содержимое. Вкладки документов — это вкладки, которые можно увидеть в браузере, например Microsoft Edge. Пользователи могут создавать, удалять и переупорядочивать вкладки, перемещать вкладки между окнами, а также и изменять содержимое вкладок.

TabView предоставляет вкладки документов для приложений UWP. Используйте TabView, если:

пользователи должны иметь возможность динамически открывать, закрывать или переупорядочивать вкладки;
пользователи должны иметь возможность открывать документы или веб-страницы непосредственно на вкладках;
пользователи должны иметь возможность перетаскивать вкладки между окнами.

Если TabView не подходит для вашего приложения, рассмотрите возможность использования элемента управления NavigationView.

Структура

На рисунке ниже показаны части элемента управления TabView. У элемента TabStrip есть верхний и нижний колонтитулы, но в отличие от документа, верхний и нижний колонтитулы TabStrip находятся в левом и правом концах полосы соответственно.

Структура элемента управления TabView

На рисунке ниже показаны части элемента управления TabViewItem. Обратите внимание на то, что хотя содержимое отображается внутри элемента управления TabView, на самом деле оно является частью TabViewItem.

Структура элемента управления TabViewItem

Создание представления вкладок

В этом примере создается простой элемент TabView с обработчиками событий для реализации открытия и закрытия вкладок.

 <muxc:TabView AddTabButtonClick="TabView_AddTabButtonClick"
               TabCloseRequested="TabView_TabCloseRequested"/>

// Add a new Tab to the TabView
private void TabView_AddTabButtonClick(muxc.TabView sender, object args)
{
    var newTab = new muxc.TabViewItem();
    newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Header = "New Document";

    // The Content of a TabViewItem is often a frame which hosts a page.
    Frame frame = new Frame();
    newTab.Content = frame;
    frame.Navigate(typeof(Page1));

    sender.TabItems.Add(newTab);
}

// Remove the requested tab from the TabView
private void TabView_TabCloseRequested(muxc.TabView sender, muxc.TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);
}

Поведение

Существует несколько способов использования или расширения функциональных возможностей TabView.

Слеза вкладки

Начиная с пакета SDK для приложений Windows 1.6, TabView поддерживает режим CanTearOutTabs , который обеспечивает расширенный интерфейс для перетаскивания вкладок в новое окно. Если этот новый параметр включен, перетаскивание вкладок очень похоже на режим перетаскивания вкладок в Edge и Chrome, где новое окно сразу же создается во время перетаскивания, что позволяет пользователю перетаскивать его на край экрана, чтобы развернуть или привязать окно в одном плавном движении. Эта реализация также не использует API перетаскивания, поэтому это не влияет на какие-либо ограничения в этих API.

Примечание.

Разрыв вкладок поддерживается в процессах, работающих с повышенными привилегиями от имени администратора.

Привязка TabItemsSource к TabViewItemCollection

<muxc:TabView TabItemsSource="{x:Bind TabViewItemCollection}" />

Отображение вкладок TabView в строке заголовка окна

Вместо того чтобы отображать вкладки в отдельной строке под строкой заголовка окна, можно объединить эти две области в одну. Это позволит сэкономить пространство по вертикали для содержимого и придать приложению современный вид.

Так как пользователь может перетаскивать окно за строку заголовка, важно, чтобы строка заголовка не была полностью заполнена вкладками. Поэтому при отображении вкладок в строке заголовка необходимо указать часть заголовка, которая будет зарезервирована в качестве области для перетаскивания. Если вы не укажете область для перетаскивания, то для перетаскивания будет использоваться вся строка заголовка, что не позволит вкладкам обрабатывать события ввода. Если TabView будет отображаться в строке заголовка окна, то в TabView следует всегда добавлять элемент TabStripFooter и помечать его как область для перетаскивания.

Дополнительные сведения см. в статье Настройка заголовка окна.

Вкладки в строке заголовка

<muxc:TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <muxc:TabViewItem Header="Home" IsClosable="False">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Home" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>
    <muxc:TabViewItem Header="Document 0">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Document" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>
    <muxc:TabViewItem Header="Document 1">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Document" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>
    <muxc:TabViewItem Header="Document 2">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Document" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>

    <muxc:TabView.TabStripHeader>
        <Grid x:Name="ShellTitlebarInset" Background="Transparent" />
    </muxc:TabView.TabStripHeader>
    <muxc:TabView.TabStripFooter>
        <Grid x:Name="CustomDragRegion" Background="Transparent" />
    </muxc:TabView.TabStripFooter>
</muxc:TabView>

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    Window.Current.SetTitleBar(CustomDragRegion);
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (FlowDirection == FlowDirection.LeftToRight)
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayRightInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayLeftInset;
    }
    else
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayLeftInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayRightInset;
    }

    CustomDragRegion.Height = ShellTitlebarInset.Height = sender.Height;
}

Примечание.

Чтобы вкладки в строке заголовка не перекрывались содержимым оболочки, необходимо учитывать наложения слева и справа. В макетах "слева направо" вставка справа включает в себя кнопки заголовков и область для перетаскивания. В макетах "справа налево" все наоборот. Значения SystemOverlayLeftInset и SystemOverlayRightInset задают отступы по левому и правому краю, поэтому для макета "справа налево" они задают отступы наоборот.

Поведение при переполнении элемента управления

С помощью параметра TabView.TabWidthMode можно управлять отображением вкладок, заполняющих строку вкладок.

Значение TabWidthMode	Поведение
Equal	По мере добавления новых вкладок все вкладки будут сжиматься по горизонтали до тех пор, пока они не достигнут очень маленькой минимальной ширины.
SizeToContent	Вкладки всегда отображаются в "естественном размере" — минимальном размере, необходимом для вывода значка и заголовка. Они не будут расширяться или сжиматься при добавлении или закрытии вкладок.

Какое бы значение вы ни задали, в итоге может быть открыто слишком много вкладок для отображения на полосе вкладок. В этом случае отобразятся бамперы прокрутки, позволяющие пользователю прокручивать TabStrip влево и вправо.

Руководство по выбору вкладок

Большинство пользователей имеет опыт использования вкладок документов в веб-браузере. При использовании вкладок документов в приложении они исходят из имеющегося опыта использования вкладок.

Независимо от того, как пользователь взаимодействует с набором вкладок документов, всегда должна быть активная вкладка. Если пользователь закрывает выбранную вкладку или прерывает выбранную вкладку в другое окно, другая вкладка должна стать активной. TabView пытается сделать это автоматически, выбрав следующую вкладку. Если у вас есть хорошая причина, по которой приложение должно разрешить tabView с неизбранной вкладкой, область содержимого TabView будет просто пустой.

TabView по умолчанию поддерживает многие распространенные сценарии навигации с помощью клавиатуры. В этом разделе описываются встроенные функции и приводятся рекомендации по дополнительным функциональным возможностям, которые могут быть полезны для некоторых приложений.

Поведение клавиши TAB и клавиш курсора

Когда фокус перемещается в область TabStrip, он переводится на выбранный элемент TabViewItem. Затем пользователь может использовать клавиши со стрелками влево и вправо для перемещения фокуса на другие вкладки в TabStrip (не выбирая их). Фокус стрелки перемещается по полосе вкладок и кнопке добавления вкладки (+), если она есть. Чтобы переместить фокус из области TabStrip, пользователь может нажать клавишу TAB, которая переместит фокус на следующий элемент. поддерживающий фокус.

Перемещение фокуса с помощью клавиши TAB

Клавиши со стрелками не перемещают фокус по кругу

Выбор вкладки

Если фокус находится на элементе TabViewItem, то нажатие клавиши ПРОБЕЛ или ВВОД позволит выбрать этот элемент TabViewItem.

Используйте клавиши со стрелками для перемещения фокуса, а затем нажмите клавишу ПРОБЕЛ, чтобы выбрать вкладку.

Нажатие клавиши ПРОБЕЛ для выбора вкладки

Сочетания клавиш для выбора соседних вкладок

Нажатие клавиш CTRL+TAB позволит выбрать следующий элемент TabViewItem. Нажатие клавиш CTRL+SHIFT+TAB позволит выбрать предыдущий элемент TabViewItem. Для этих целей список вкладок "зациклен", поэтому при выборе следующей вкладки с выбранной последней вкладкой будет выбрана первая вкладка.

Закрытие вкладки

Нажатие клавиш CTRL+F4 вызовет событие TabCloseRequested. Обработайте это событие и закройте вкладку, если это возможно.

Реализация поведения клавиатуры, аналогичного браузеру

В этом примере реализуется ряд описанных выше рекомендаций для TabView. В частности, в этом примере реализуются сочетание клавиш CTRL+T, CTRL+W, CTRL+1…8 и CTRL+9.

<muxc:TabView x:Name="TabRoot">
    <muxc:TabView.KeyboardAccelerators>
        <KeyboardAccelerator Key="T" Modifiers="Control" Invoked="NewTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="W" Modifiers="Control" Invoked="CloseSelectedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number1" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number2" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number3" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number4" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number5" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number6" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number7" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number8" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number9" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
    </muxc:TabView.KeyboardAccelerators>
    <!-- ... some tabs ... -->
</muxc:TabView>

private void NewTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    // Create new tab.
    var newTab = new muxc.TabViewItem();
    newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Header = "New Document";

    // The Content of a TabViewItem is often a frame which hosts a page.
    Frame frame = new Frame();
    newTab.Content = frame;
    frame.Navigate(typeof(Page1));

    TabRoot.TabItems.Add(newTab);
}

private void CloseSelectedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    // Only remove the selected tab if it can be closed.
    if (((muxc.TabViewItem)TabRoot.SelectedItem).IsClosable)
    {
        TabRoot.TabItems.Remove(TabRoot.SelectedItem);
    }
}

private void NavigateToNumberedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    int tabToSelect = 0;

    switch (sender.Key)
    {
        case Windows.System.VirtualKey.Number1:
            tabToSelect = 0;
            break;
        case Windows.System.VirtualKey.Number2:
            tabToSelect = 1;
            break;
        case Windows.System.VirtualKey.Number3:
            tabToSelect = 2;
            break;
        case Windows.System.VirtualKey.Number4:
            tabToSelect = 3;
            break;
        case Windows.System.VirtualKey.Number5:
            tabToSelect = 4;
            break;
        case Windows.System.VirtualKey.Number6:
            tabToSelect = 5;
            break;
        case Windows.System.VirtualKey.Number7:
            tabToSelect = 6;
            break;
        case Windows.System.VirtualKey.Number8:
            tabToSelect = 7;
            break;
        case Windows.System.VirtualKey.Number9:
            // Select the last tab
            tabToSelect = TabRoot.TabItems.Count - 1;
            break;
    }

    // Only select the tab if it is in the list
    if (tabToSelect < TabRoot.TabItems.Count)
    {
        TabRoot.SelectedIndex = tabToSelect;
    }
}

Поделиться через

TabView

Выбор правильного элемента управления

Структура

Создание представления вкладок

Поведение

Слеза вкладки

Привязка TabItemsSource к TabViewItemCollection

Отображение вкладок TabView в строке заголовка окна

Поведение при переполнении элемента управления

Руководство по выбору вкладок

Навигация с помощью клавиатуры

Поведение клавиши TAB и клавиш курсора

Выбор вкладки

Сочетания клавиш для выбора соседних вкладок

Закрытие вкладки

Рекомендации по использованию клавиатуры для разработчиков приложений

Реализация поведения клавиатуры, аналогичного браузеру

Дополнительные ресурсы

Поделиться через

TabView

Выбор правильного элемента управления

Структура

Создание представления вкладок

Поведение

Слеза вкладки

Привязка TabItemsSource к TabViewItemCollection

Отображение вкладок TabView в строке заголовка окна

Поведение при переполнении элемента управления

Руководство по выбору вкладок

Навигация с помощью клавиатуры

Поведение клавиши TAB и клавиш курсора

Выбор вкладки

Сочетания клавиш для выбора соседних вкладок

Закрытие вкладки

Рекомендации по использованию клавиатуры для разработчиков приложений

Реализация поведения клавиатуры, аналогичного браузеру

Связанные статьи

Дополнительные ресурсы