PipsPager

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

Что такое pip?

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

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

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

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

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

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

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

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

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

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

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

<PipsPager x:Name="DefaultPipsPager" />

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

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

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

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

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

Прокрутка pips

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

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

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

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

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

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

• ScrollViewer
• FlipView
• ItemsRepeater