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

Стержень

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

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

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

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

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

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

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

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

Ниже перечислены некоторые ключевые различия между NavigationView и 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 создает базовый элемент управления сводной таблицы с 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 2

Внимание

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

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

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

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