PipsPager

PipsPager 컨트롤은 사용자가 구성 가능한 문자 모양 컬렉션을 사용하여 선형으로 페이지 번호가 매겨진 콘텐츠 내에서 탐색할 수 있도록 도와줍니다. 각 문자 모양은 무제한 범위 내에서 단일 "페이지"를 나타냅니다. 문자 모양은 현재 페이지를 강조 표시하고 이전 페이지와 이후 페이지의 가용성을 나타냅니다. 컨트롤은 현재 컨텍스트를 사용하며 명시적 페이지 번호 매기기나 비선형 구성을 지원하지 않습니다.

Pip란?

Pip는 일반적으로 점으로 렌더링되는 숫자 값의 단위를 나타냅니다. 그러나 대시 또는 사각형과 같은 다른 문자 모양을 사용하도록 사용자 지정할 수 있습니다.

기본적으로 PipsPager 컨트롤의 각 단색 점은 콘텐츠 레이아웃의 페이지를 나타냅니다. 사용자는 콘텐츠에서 점을 선택하여 해당 페이지로 이동할 수 있습니다.

올바른 컨트롤인가요?

콘텐츠가 선형 구조로 구성되어 있거나, 명시적으로 번호가 매겨져 있지 않거나, 번호가 매겨진 페이지의 문자 모양 기반 표현이 필요한 경우에는 PipsPager를 사용합니다.

이 UI는 사진 뷰어 및 앱 목록과 같이 표시 공간이 제한되어 있고 잠재적인 페이지 수가 무한 앱에서 주로 사용됩니다.

권장 사항

• PipsPager의 일반적인 UI 패턴에는 사진 뷰어, 앱 목록, 슬라이드 및 표시 공간이 제한되는 레이아웃이 포함되어 있습니다.
• 게임 패드 입력에 최적화된 환경의 경우 가로 PipsPager의 왼쪽 또는 오른쪽이나 세로 방향 PipsPager의 위쪽 또는 아래쪽에 UI를 직접 배치 하는 것이 좋습니다.
• 터치 입력에 최적화된 환경의 경우 PipsPager를 FlipView와 같은 뷰 컨트롤과 통합하여 터치를 사용한 콘텐츠 페이지 매김 기능을 활용하는 것이 좋습니다(사용자가 터치를 사용하여 개별 pip를 선택할 수도 있음).

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 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 Api:PipsPager 클래스
• WinUI 2 갤러리 앱을 열고 작동 중인 PipsPager를 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작을 참조하세요.

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

<muxc:PipsPager />

PipsPager 만들기

• 중요 API: PipsPager 클래스

WinUI 3 갤러리 앱을 열고 작동 중인 PipsPager를 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

기본 PipsPager는 가로(기본값) 또는 세로 방향을 지향할 수 있는 5개의 표시 pip로 구성됩니다.

또한 PipsPager는 증분 인접 페이지로 이동하는 탐색 단추(이전, 다음)를 지원합니다. 기본적으로 탐색 단추는 축소되어 있으며 레이아웃 공간을 차지하지 않습니다.

첫 번째 항목과 마지막 항목 사이에는 래핑이 지원되지 않습니다.

<PipsPager x:Name="DefaultPipsPager" />

탐색 단추가 있는 가로 PipsPager

탐색 단추(이전, 다음)는 사용자가 증분 인접 페이지로 이동할 수 있게 해줍니다.

기본적으로 탐색 단추는 축소되어 있습니다. PreviousButtonVisibility 및 NextButtonVisibility 속성을 통해 이 동작을 제어할 수 있습니다.

이러한 속성의 가능한 값은 다음과 같습니다.

• 축소: 단추가 사용자에게 표시되지 않으며 레이아웃 공간을 차지하지 않습니다. (기본값)
• 표시: 단추가 표시되고 사용하도록 설정됩니다. PipsPager가 콘텐츠의 최소 또는 최대 범위에 있으면 각 단추가 자동으로 숨겨집니다. 예를 들어 현재 페이지가 첫 페이지인 경우 이전 단추가 숨겨지고, 현재 페이지가 마지막 페이지이면 다음 단추가 숨겨집니다. 숨겨진 경우 단추는 표시되지 않지만 레이아웃 공간은 사용됩니다.
• VisibleOnPointerOver: 사용자가 포인터 커서로 PipsPager UI를 가리키거나 사용자가 PipsPager에 키보드 포커스를 설정하는 경우에만 단추가 표시된다는 점을 제외하고 Visible과 동일하게 동작합니다.

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

스크롤 pip

콘텐츠가 다수의 페이지(NumberOfPages)로 구성된 경우 MaxVisiblePips 속성을 사용하여 표시되는 대화형 pip 수를 설정할 수 있습니다.

NumberOfPages의 값이 MaxVisiblePips의 값 보다 크면 선택된 페이지를 컨트롤의 가운데에 맞추기 위해 pip가 자동으로 스크롤됩니다. NumberOfPages가 MaxVisiblePips보다 작거나 같은 경우 스크롤이 발생하지 않으며 표시된 pip의 개수가 NumberOfPages의 값과 동일합니다.

MaxVisiblePips의 값이 사용 가능한 레이아웃 공간보다 크면 표시된 pip가 잘립니다. 표시되는 pip의 수는 MaxVisiblePips 및 NumberOfPages 중 더 작은 쪽입니다.

기본적으로 최대 5개의 pip가 표시됩니다.

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

PipsPager를 컬렉션 컨트롤과 통합

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 및 탐색 단추 사용자 지정

탐색 단추 및 pip는 PreviousButtonStyle, NextButtonStyle, SelectedPipStyle 및 NormalPipStyle 속성을 통해 사용자 지정할 수 있습니다.

PreviousButtonStyle 또는 NextButtonStyle 속성을 통해 표시 여부를 설정하는 경우, 이러한 설정은 각각 PreviousButtonVisibility 또는 NextButtonVisibility 속성보다 우선합니다(Collapsed의 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