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

Стержень

Элемент управления Pivot позволяет прокручивать касанием небольшой набор разделов содержимого.

Фокус по умолчанию подчеркивает выбранный заголовок

Это правильный контроль?

Предупреждение

Элемент управления Pivot не рекомендуется использовать для шаблонов конструктора Windows 11. Мы настоятельно рекомендуем использовать один из следующих вариантов:

Чтобы создать похожий на Pivot пользовательский интерфейс при использовании WinUI и Windows SDK приложения, используйте элемент управления SelectorBar.

Чтобы создать пользовательский интерфейс с вкладками, используйте элемент управления TabView .

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

Ниже перечислены некоторые ключевые различия между NavigationView и Pivot:

  • Pivot поддерживает касание с помощью прокрутки для переключения между элементами.
  • Элементы переполнения в карусели Pivot, тогда как NavigationView использует выпадающее меню для отображения всех элементов пользователям.
  • Pivot обрабатывает навигацию между разделами содержимого, а NavigationView позволяет лучше контролировать поведение навигации.

Использование NavigationView вместо Pivot

Если пользовательский интерфейс приложения использует элемент управления Pivot, вы можете преобразовать сводную таблицу в NavigationView , выполнив этот пример.

Этот XAML создает NavigationView с 3 разделами содержимого, как пример Pivot в Создании элемента управления Pivot.

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView предоставляет больше контроля над настройкой навигации и требует соответствующего кода программной части. В дополнение к указанному выше коду XAML используйте следующий код программной части:

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

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

Создание поворотного элемента управления

Предупреждение

Элемент управления Pivot не рекомендуется использовать для шаблонов конструктора Windows 11. Мы настоятельно рекомендуем использовать один из следующих вариантов:

Этот XAML создает базовый элемент управления Pivot с 3 разделами содержимого.

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

Элементы сводной таблицы

Поворотный элемент — это ItemsControl, поэтому он может содержать коллекцию элементов любого типа. Любой элемент, добавляемый в сводную таблицу, который не является явным образом PivotItem, неявно упакован в PivotItem. Поскольку Pivot часто используется для перехода между страницами содержимого, коллекцию элементов обычно заполняют непосредственно с использованием элементов пользовательского интерфейса XAML. Кроме того, можно задать свойство ItemsSource источнику данных. Элементы, привязанные в ItemsSource, могут иметь любой тип, но если они не являются явным образом PivotItems, необходимо определить ItemTemplate и HeaderTemplate , чтобы указать способ отображения элементов.

Свойство SelectedItem можно использовать для получения или задания активного элемента сводной таблицы. Используйте свойство SelectedIndex , чтобы получить или задать индекс активного элемента.

Заголовки сводной таблицы

Свойства LeftHeader и RightHeader можно использовать для добавления других элементов управления в заголовок сводной таблицы.

Например, можно добавить Командную панель в правую часть заголовка Сводной таблицы.

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

Взаимодействие с сводной таблицей

Элемент управления включает следующие взаимодействия сенсорного жеста:

  • При нажатии на заголовок пивотного элемента происходит переход к содержимому раздела этого заголовка.
  • Прокрутка влево или вправо в заголовке элемента сводной таблицы переходит к соседнему разделу.
  • Прокрутка влево или вправо по содержимому раздела переходит к соседнему разделу.

Элемент управления поставляется в двух режимах:

Стационарный

  • Сводные таблицы являются стационарными, когда все заголовки сводной таблицы помещаются в допустимое пространство.
  • Касание ярлыка пивота переходит на соответствующую страницу, хотя сам пивот не будет перемещаться. Выделена активная ось.

Карусель

  • Поворачивает карусель, когда все заголовки вкладок не помещаются в отведенное пространство.
  • Касание пивотной метки переходит на соответствующую страницу, и активная пивотная метка переместится в первую позицию.
  • Элементы переключаются в карусели циклически от последнего до первого раздела.

Подсказка

  • Избегайте использования более 5 заголовков в режиме карусели, так как повторение более чем 5 раз может сбивать с толку.
  • Заголовки сводной таблицы не должны вращаться в окружении 10ft. Установите для свойства IsHeaderItemsCarouselEnabled значение false, если ваше приложение будет работать на Xbox.

UWP и WinUI для UWP

Это важно

Сведения и примеры, приведенные в этой статье, оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но, как правило, применимы и к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

Мы рекомендуем использовать последнюю версию WinUI для UWP , чтобы получить самые актуальные стили и шаблоны для всех элементов управления.

  • Last updated on