PipsPager

  • 發行項

PipsPager 控制項可協助使用者使用可設定的字元集合線上性編頁內容內巡覽，其中每一個都代表無限範圍內的單一「頁面」。 圖像會反白顯示目前頁面，並指出上述頁面和成功頁面的可用性。 控制項依賴目前的內容，而且不支援明確的頁碼或非線性組織。

什麼是 pip？

Pips 代表數值單位，通常轉譯為點。 不過，您可以自訂它們來使用其他字元，例如虛線或方形。

根據預設，PipsPager 控制項中的每個實心點都代表內容版面配置中的頁面。 使用者可以選取點以流覽至內容中的該頁面。

這是正確的控制項嗎？

針對以線性結構組織的內容使用 PipsPager、未明確編號，或需要以字元為基礎的編號頁面表示。

此 UI 通常用於相片檢視器和應用程式清單等應用程式中，其中顯示空間有限，且潛在頁面數目無限。

建議

  • PipsPager 的常見 UI 模式包括相片檢視器、應用程式清單、浮動切換，以及顯示空間受限的版面配置。
  • 針對針對遊戲台輸入優化的體驗，建議您不要將 UI 直接放在水準 PipsPager 的左邊或右邊，以及垂直導向 PipsPager 的上方或下方。
  • 針對針對觸控輸入優化的體驗，我們建議將 PipsPager 與檢視控制項整合，例如 FlipView，以利用具有觸控的內容分頁， (使用者也可以使用觸控來選取個別 pips) 。

UWP 和 WinUI 2

重要

本文中的資訊和範例已針對使用Windows 應用程式 SDK和WinUI 3的應用程式優化，但通常適用于使用WinUI 2 的UWP 應用程式。 如需平臺特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

適用于 UWP 應用程式的 PipsPager 需要 Windows UI 程式庫 2。 如需詳細資訊 (包括安裝指示)，請參閱 Windows UI 程式庫。 此控制項的 API 存在於 Microsoft.UI.Xaml.Controls 命名空間中。

若要搭配 WinUI 2 使用本文中的程式碼，請使用 XAML 中的別名 (我們使用 muxc) 來代表專案中隨附的 Windows UI 程式庫 API。 如需詳細資訊 ，請參閱開始使用 WinUI 2 。

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

<muxc:PipsPager />

建立 PipsPager

開啟 WinUI 3 資源庫應用程式，並查看 PipsPager 運作情形。

WinUI 3 資源庫應用程式包含大部分 WinUI 3 控制項、特性和功能的互動式範例。 從Microsoft Store取得應用程式，或在GitHub上取得原始程式碼

預設 PipsPager 是由五個可見的 pip 組成，可水準 (預設) 或垂直方向。

PipsPager 也支援先前 (瀏覽按鈕，接下來) 移至累加連續的頁面。 根據預設，瀏覽按鈕會折迭，且不會佔用版面配置空間。

不支援在第一個專案與最後一個專案之間換行。

具有五個水準點的預設 PipsPager，以及第一個選取的點。 

<PipsPager x:Name="DefaultPipsPager" />

具有瀏覽按鈕的水準 PipsPager

瀏覽按鈕 (先前的下一個) 讓使用者移至累加連續的頁面。

根據預設，瀏覽按鈕會折迭。 您可以透過 PreviousButtonVisibility 和 NextButtonVisibility 屬性來控制此行為。

這些屬性的可能值為：

  • 折迭：使用者看不到按鈕， 而且不會 佔用版面配置空間。 (預設值)
  • 可見：按鈕可見且已啟用。 當 PipsPager 是內容的最低或最大範圍時，會自動隱藏每個按鈕。 例如，如果目前頁面是第一頁，則會隱藏上一個按鈕;如果目前頁面是最後一頁，則會隱藏下一個按鈕。 隱藏時，按鈕不會顯示，但 會 佔用版面配置空間。
  • VisibleOnPointerOver：行為與 Visible 相同，不同之處在于， 只有在 使用者將指標游標停留在 PipsPager UI 上時，才會顯示按鈕，或使用者設定 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" />

捲動管線

如果內容包含大量頁面， (NumberOfPages) ，您可以使用 MaxVisiblePips 屬性來設定可見互動式管線的數目。

如果 NumberOfPages 的值大於 MaxVisiblePips 的值，pips 就會自動捲動以置中控制項中選取的頁面。 如果 NumberOfPages 等於或小於 MaxVisiblePips，則不會發生捲動，而且顯示的 pip 數目與 NumberOfPages 的值相同。

如果 MaxVisiblePips 的值大於可用的配置空間，則會裁剪顯示的 pip。 顯示的 pip 數目是 MaxVisiblePips 和 NumberOfPages 的較小數目。

根據預設，最多會顯示五個 pip。

具有水準捲動 pip 的 PipsPager。 

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

整合 PipsPager 與集合控制項

PipsPager，在 FlipView 相片簿下方有五個水準點。選取第三個點，表示內容的第三頁。

PipsPager 通常與集合控制項搭配使用。

下列範例示範如何使用 FlipView 系結 PipsPager，並提供另一種方式來流覽內容，並指出目前的頁面。

注意

若要 只 使用 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 和瀏覽按鈕自訂

瀏覽按鈕和 pip 可以透過PreviousButtonStyle、NextButtonStyle、SelectedPipStyle和NormalPipStyle屬性來自訂。

如果您透過 PreviousButtonStyle 或 NextButtonStyle 屬性設定可見度，這些設定會 (分別優先于 PreviousButtonVisibility 或 NextButtonVisibility 屬性，除非它們設定為 Collapsed) 的 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" />