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

Pivot

  • Статья

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

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

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

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

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

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

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

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

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

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

UWP и WinUI 2

Внимание

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

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

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

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

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

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

Этот код XAML создает элемент управления NavigationView с тремя разделами содержимого, как показано в примере в разделе о создании элемента управления 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>

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

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

Чтобы получить или настроить активный элемент Pivot, можно использовать свойство SelectedItem. Чтобы получить или указать индекс активного элемента, используйте свойство SelectedIndex.

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

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

Например, можно добавить CommandBar в свойство RightHeader элемента Pivot.

<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. Задайте для свойства false IsHeaderItemsCarouselEnabled значение, если ваше приложение будет работать на Xbox.