PipsPager

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

Что такое pip?

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

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

Это подходящий элемент управления?

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

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

Рекомендации

• Общие шаблоны пользовательского интерфейса для PipsPager включают в себя средства просмотра фотографий, списки приложений, карусели и макеты, в которых ограниченное пространство отображения.
• Для опыта, оптимизированного для ввода с геймпада, мы рекомендуем не размещать пользовательский интерфейс непосредственно слева или справа от горизонтального PipsPager и выше или ниже вертикально расположенного PipsPager.
• Для возможностей, оптимизированных для ввода через сенсорный экран, рекомендуется интегрировать PipsPager с элементом управления представлением, например FlipView, чтобы пользоваться сенсорным вводом для перелистывания содержимого (пользователь также может использовать сенсорный экран для выбора отдельных меток).

Создание PipsPager

Приложение WinUI 3 Gallery включает интерактивные примеры большинства элементов управления, функций и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

По умолчанию PipsPager состоит из пяти видимых «пипов», которые могут быть ориентированы горизонтально (по умолчанию) или вертикально.

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

Оболочка между первым и последним элементами не поддерживается.

<PipsPager x:Name="DefaultPipsPager" />

Горизонтальный PipsPager с кнопками навигации

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

По умолчанию кнопки навигации свернуты. Это поведение можно контролировать с помощью свойств PreviousButtonVisibility и NextButtonVisibility.

Возможные значения этих свойств:

• Свернутый: кнопка не отображается пользователю и не занимает место в макете. (по умолчанию)
• Видимый: кнопка отображается и включена. Каждая кнопка автоматически скрывается, когда PipsPager достигает минимальной или максимальной границы содержимого. Например, если текущая страница является первой, то предыдущая кнопка скрыта; Если текущая страница является последней, то следующая кнопка скрыта. Когда скрыта, кнопка не видна, но занимает место в макете.
• VisibleOnPointerOver: Поведение такое же, как у Visible, за исключением того, что кнопка отображается только при наведении указателя на интерфейс PipsPager или при установке фокуса клавиатуры на PipsPager.

<PipsPager x:Name="VisibleButtonPipsPager"
    NumberOfPages="5"
    PreviousButtonVisibility="Visible"
    NextButtonVisibility="Visible" />

Вертикальный PipsPager с кнопками навигации, которые становятся видимыми при наведении указателя

PipsPager может быть ориентирован по вертикали без изменений в поведении или взаимодействии.

Верхняя кнопка соответствует первой кнопке, а нижняя кнопка соответствует последней кнопке в горизонтальном представлении.

В следующем примере показан параметр VisibleOnPointerOver для кнопок навигации.

<PipsPager x:Name="VerticalPipsPager"
    NumberOfPages="5"
    Orientation="Vertical" 
    PreviousButtonVisibility="VisibleOnPointerOver" 
    NextButtonVisibility="VisibleOnPointerOver" />

Прокрутка точек

Если содержимое состоит из большого количества страниц (NumberOfPages), можно использовать свойство MaxVisiblePips для задания количества видимых, интерактивных pips.

Если значение NumberOfPages больше значения MaxVisiblePips, элементы pips автоматически прокручиваются, чтобы центрировать выбранную страницу в элементе управления. Если NumberOfPages равен или меньше MaxVisiblePips, не возникает прокрутка, и количество отображаемых pips совпадает со значением NumberOfPages.

Если значение MaxVisiblePips больше доступного пространства макета, отображаемые pips обрезаются. Число отображаемых pips меньше MaxVisiblePips и NumberOfPages.

По умолчанию отображается не более пяти пипсов.

<PipsPager x:Name="ScrollingPipsPager"
    NumberOfPages="20"
    MaxVisiblePips="10" />

Интеграция PipsPager с контролем Collection

PipsPager часто используется вместе с элементами управления коллекцией.

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

<StackPanel>
  <FlipView x:Name="Gallery" MaxWidth="400" Height="270" ItemsSource="{x:Bind Pictures}">
      <FlipView.ItemTemplate>
          <DataTemplate x:DataType="x:String">
              <Image Source="{x:Bind Mode=OneWay}"/>
          </DataTemplate>
      </FlipView.ItemTemplate>
  </FlipView>

  <!-- The SelectedPageIndex is bound to the FlipView to keep the two in sync -->
  <PipsPager x:Name="FlipViewPipsPager"
      HorizontalAlignment="Center"
      Margin="0, 10, 0, 0"
      NumberOfPages="{x:Bind Pictures.Count}"
      SelectedPageIndex="{x:Bind Path=Gallery.SelectedIndex, Mode=TwoWay}" />
</StackPanel>

Настройка кнопки pip и навигации

Кнопки навигации и элементы-индикаторы можно настроить с помощью свойств PreviousButtonStyle, NextButtonStyle, SelectedPipStyle и NormalPipStyle.

Если вы задаете видимость через свойства PreviousButtonStyle или NextButtonStyle, эти настройки имеют приоритет над свойствами PreviousButtonVisibility или NextButtonVisibility соответственно (если они не установлены на значение PipsPagerButtonVisibility Collapsed).

<Page.Resources>
    <Style x:Key="NavButtonBaseStyle" TargetType="Button" BasedOn="{StaticResource PipsPagerNavigationButtonBaseStyle}">
        <Setter Property="Width" Value="30" />
        <Setter Property="Height" Value="30" />
        <Setter Property="FontSize" Value="12" />
    </Style>

    <Style x:Key="PreviousButtonStyle" BasedOn="{StaticResource NavButtonBaseStyle}" TargetType="Button">
        <Setter Property="Content" Value="&#xEDDB;" />
    </Style>

    <Style x:Key="NextButtonStyle" BasedOn="{StaticResource NavButtonBaseStyle}" TargetType="Button">
        <Setter Property="Content" Value="&#xEDDC;" />
    </Style>
</Page.Resources>

<PipsPager x:Name="CustomNavButtonPipsPager"
    PreviousButtonStyle="{StaticResource PreviousButtonStyle}"
    NextButtonStyle="{StaticResource NextButtonStyle}"
    PreviousButtonVisibility="VisibleOnPointerOver" 
    NextButtonVisibility="VisibleOnPointerOver" />

UWP и WinUI 2

Для приложений UWP PipsPager требуется WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI 2. API для этого элемента управления существуют в пространстве имен Microsoft.UI.Xaml.Controls .

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:PipsPager />

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

• Просмотрщик прокрутки
• ФлипВью
• Репетитор элементов