다음을 통해 공유

중심축

Pivot 컨트롤을 사용하면 소수의 콘텐츠 섹션 간에 터치하여 스와이핑할 수 있습니다.

기본 포커스가 선택한 헤더에 밑줄을 표시합니다.

이것이 올바른 컨트롤인가요?

경고

피벗 컨트롤은 Windows 11 디자인 패턴 권장되지 않습니다. 대신 다음 대안 중 하나를 사용하는 것이 좋습니다.

탭 UI를 만들려면 TabView 컨트롤을 사용하십시오.

일반적인 최상위 탐색 패턴을 얻으려면 다양한 화면 크기에 맞게 자동으로 조정되고 더 많은 사용자 지정을 허용하는 NavigationView를 사용하는 것이 좋습니다.

NavigationView와 Pivot 간의 몇 가지 주요 차이점은 다음과 같습니다.

  • Pivot은 항목 간에 전환하기 위한 터치 스와이프를 지원합니다.
  • Pivot 캐러셀에서는 항목이 넘쳐날 경우를 대비하며, NavigationView는 사용자들이 모든 항목을 볼 수 있도록 메뉴 드롭다운 오버플로를 사용합니다.
  • NavigationView를 사용하면 탐색 동작을 더 완벽하게 제어할 수 있는 반면, Pivot은 콘텐츠 섹션 간의 탐색을 처리합니다.

Pivot 대신 NavigationView 사용

앱의 UI가 Pivot 컨트롤을 사용하는 경우, 다음 예제에 따라 Pivot을 NavigationView로 변환할 수 있습니다.

이 XAML은 컨트롤 만들기의 예제 Pivot과 같이 콘텐츠 섹션 3개가 있는 NavigationView를 만듭니다.

<NavigationView x:Name="rootNavigationView" Header="Category Title"
 ItemInvoked="NavView_ItemInvoked">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Section 1" x:Name="Section1Content" />
        <NavigationViewItem Content="Section 2" x:Name="Section2Content" />
        <NavigationViewItem Content="Section 3" x:Name="Section3Content" />
    </NavigationView.MenuItems>
    
    <Frame x:Name="ContentFrame" />
</NavigationView>

<Page x:Class="AppName.Section1Page">
    <TextBlock Text="Content of section 1."/>
</Page>

<Page x:Class="AppName.Section2Page">
    <TextBlock Text="Content of section 2."/>
</Page>

<Page x:Class="AppName.Section3Page">
    <TextBlock Text="Content of section 3."/>
</Page>

NavigationView를 사용하면 탐색 사용자 지정을 더 완벽하게 제어할 수 있으며, 해당 코드 숨김이 필요합니다. 위 XAML을 동반하여 다음 코드 비하인드를 사용하십시오.

private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
   var navOptions = new FrameNavigationOptions
   {
      TransitionInfoOverride = args.RecommendedNavigationTransitionInfo,
      IsNavigationStackEnabled = false,
   };

   switch (args.InvokedItemContainer.Name)
   {
      case nameof(Section1Content):
         ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
         break;

      case nameof(Section2Content):
         ContentFrame.NavigateToType(typeof(Section2Page), null, navOptions);
         break;

      case nameof(Section3Content):
         ContentFrame.NavigateToType(typeof(Section3Page), null, navOptions);
         break;
   }  
}

이 코드는 콘텐츠 섹션 사이의 터치 스와이프 경험을 제외하고 Pivot 컨트롤의 기본 제공 탐색 환경을 모방합니다. 그러나 애니메이션 효과를 준 전환, 탐색 매개 변수, 스택 기능을 포함하여 여러 가지 사항을 사용자 지정할 수도 있습니다.

피벗 컨트롤 만들기

경고

피벗 컨트롤은 Windows 11 디자인 패턴 권장되지 않습니다. 대신 다음 대안 중 하나를 사용하는 것이 좋습니다.

이 XAML로 콘텐츠 섹션이 3개인 기본 Pivot 컨트롤을 만듭니다.

<Pivot x:Name="rootPivot" Title="Category Title">
    <PivotItem Header="Section 1">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 1."/>
    </PivotItem>
    <PivotItem Header="Section 2">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 2."/>
    </PivotItem>
    <PivotItem Header="Section 3">
        <!--Pivot content goes here-->
        <TextBlock Text="Content of section 3."/>
    </PivotItem>
</Pivot>

피벗 항목

Pivot은 ItemsControl이므로 모든 타입의 항목 컬렉션을 포함할 수 있습니다. Pivot에 명시적으로 PivotItem이 아닌 모든 항목은 암묵적으로 PivotItem으로 래핑됩니다. Pivot은 콘텐츠 페이지 간을 탐색하는 데 자주 사용되므로 일반적으로 Items 컬렉션을 XAML UI 요소로 직접 채우는 것이 일반적입니다. 또는 ItemsSource 속성을 데이터 소스로 설정할 수 있습니다. ItemsSource에 바인딩된 항목은 모든 타입이 가능하지만, 명시적으로 PivotItems이 아니라면 ItemTemplate 및 HeaderTemplate을 정의하여 항목이 표시되는 방식을 지정해야 합니다.

SelectedItem 속성을 사용하여 Pivot의 활성 항목을 얻거나 설정할 수 있습니다. SelectedIndex 속성을 속성을 사용하여 활성 항목의 인덱스를 얻거나 설정합니다.

피벗 헤더

LeftHeader 및 RightHeader 속성을 사용하여 Pivot 헤더에 다른 컨트롤을 추가할 수 있습니다.

예를 들어 피벗의 RightHeader에 CommandBar를 추가할 수 있습니다.

<Pivot>
    <Pivot.RightHeader>
        <CommandBar>
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit"/>
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
        </CommandBar>
    </Pivot.RightHeader>
</Pivot>

피벗 상호 작용

컨트롤은 다음과 같은 터치 제스처 상호 작용을 제공합니다.

  • 피벗 항목 헤더를 탭하면 해당 헤더의 섹션 콘텐츠로 이동합니다.
  • 피벗 항목 헤더에서 왼쪽 또는 오른쪽으로 살짝 밀면 인접한 섹션으로 이동합니다.
  • 섹션 콘텐츠에서 왼쪽 또는 오른쪽으로 밀어 내면 인접한 섹션으로 이동합니다.

컨트롤은 다음 두 가지 모드로 제공됩니다.

고정

  • 모든 피벗 헤더가 허용된 공간 내에 맞으면 Pivot은 고정된 상태를 유지합니다.
  • 피벗 레이블을 탭하면 해당 페이지로 이동하지만 피벗 자체는 이동하지 않습니다. 활성 피벗이 강조 표시됩니다.

캐러셀

  • 모든 피벗 헤더가 허용된 공간에 맞지 않는 경우 Pivot이 순서대로 회전합니다.
  • 피벗 레이블을 탭하면 해당 페이지로 이동하고 활성 피벗 레이블은 첫 번째 위치로 회전합니다.
  • 회전목마의 피벗 항목은 마지막 피벗 섹션부터 첫 번째 피벗 섹션까지 순환합니다.

팁 (조언)

  • 5개 이상이 반복될 경우 혼란을 초래할 수 있으니, 회전식 모드를 사용하는 경우 5개 이상의 헤더를 사용하지 마세요.
  • Last updated on