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

PipsPager

  • Статья

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

Что такое pip?

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

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

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

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

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

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

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

UWP и WinUI 2

Внимание

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

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении 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 />

Создание PipsPager

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

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

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

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

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

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

<PipsPager x:Name="DefaultPipsPager" />

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

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

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

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

  • Свернутый: кнопка не отображается пользователю и не занимает место в макете. (по умолчанию)
  • Видимый: кнопка отображается и включена. Каждая кнопка автоматически скрыта, если pipsPager находится в минимальной или максимальной степени содержимого. Например, если текущая страница является первой, то предыдущая кнопка скрыта; Если текущая страница является последней, то следующая кнопка скрыта. При скрытии кнопка не отображается, но занимает место макета.
  • VisibleOnPointerOver: поведение совпадает с видимым , за исключением того, что кнопка отображается только при наведении курсора указателя на пользовательский интерфейс 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 автоматически прокручивается, чтобы центрировать выбранную страницу в элементе управления. Если ЧислоOfPages равно или меньше MaxVisiblePips, прокрутка не возникает, а число pips, показанное, совпадает со значением NumberOfPages.

Если значение MaxVisiblePips больше доступного пространства макета, отображаемые pips обрезаются. Число отображаемых 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 свернутого).

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