Share via

PipsPager

  • Статья

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

Что такое pip?

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

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

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

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

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

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

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

UWP и WinUI 2

Важно!

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

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

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

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

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

<muxc:PipsPager />

Создание PipsPager

Откройте приложение коллекции WinUI 3 и просмотрите PipsPager в действии.

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

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

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

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

PipsPager по умолчанию с пятью горизонтальными точками, первая из них выбрана 

<PipsPager x:Name="DefaultPipsPager" />

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

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

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

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

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

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

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

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

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

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

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

PipsPager с пятью вертикальными точками и кнопками навигации на основе указателя на текущую страницу. 

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

Прокрутка pips

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

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

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

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

PipsPager с горизонтальной прокруткой pips. 

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

Интеграция PipsPager с элементом управления Collection

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

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

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

Примечание

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

<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 и навигации

Кнопки навигации и pips можно настроить с помощью свойств PreviousButtonStyle, NextButtonStyle, SelectedPipStyle и NormalPipStyle .

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

PipsPager с пятью горизонтальными точками и настраиваемыми кнопками навигации. 

<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" />