피벗

아티클
04/16/2024

Pivot 컨트롤을 통해 작은 콘텐츠 섹션 세트에서 터치하여 살짝 밀기를 사용할 수 있습니다.

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

올바른 컨트롤인가요?

Warning

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

WinUI 3 - 이 SelectorBar 컨트롤을 사용합니다.
WinUI 2/UWP - Pivot 컨트롤 대신 NavigationView 또는 TabView 컨트롤을 사용합니다. 예제는 Pivot 섹션 대신 NavigationView 사용하기를 참조하세요.

WinUI 3 및 Windows 앱 SDK 사용할 때 Pivot과 유사한 UI를 만들려면 SelectorBar 컨트롤을 사용합니다.

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

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

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

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

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보를 다룹니다.

이 컨트롤용 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

UWP API: 피벗 클래스
WinUI 2 갤러리 앱을 열고 작업 중인 Pivot을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

최신 WinUI 2를 사용하여 모든 컨트롤에 적용되는 최신 스타일과 템플릿을 가져오는 것이 좋습니다.

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 컨트롤의 기본 제공 탐색 환경을 모방합니다. 그러나 애니메이션 효과를 준 전환, 탐색 매개 변수, 스택 기능을 포함하여 여러 가지 사항을 사용자 지정할 수도 있습니다.

피벗 컨트롤 만들기

Warning

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

WinUI 3 - 이 SelectorBar 컨트롤을 사용합니다.
WinUI 2/UWP - Pivot 컨트롤 대신 NavigationView 또는 TabView 컨트롤을 사용합니다. 예제는 Pivot 섹션 대신 NavigationView 사용하기를 참조하세요.

이 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 항목

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

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

Pivot 헤더

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은 고정됩니다.
피벗 레이블을 탭하면 해당 페이지로 이동하지만 피벗 자체는 이동하지 않습니다. 활성 피벗이 강조 표시됩니다.

캐러셀

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

팁

5개 이상이 반복될 경우 혼란을 초래할 수 있으니, 회전식 모드를 사용하는 경우 5개 이상의 헤더를 사용하지 마세요.
피벗 헤더가 3m 환경에서는 회전하면 안 됩니다. Xbox에서 앱을 실행할 경우 IsHeaderItemsCarouselEnabled 속성을 false 로 설정합니다.

다음을 통해 공유

피벗

올바른 컨트롤인가요?

UWP 및 WinUI 2

Pivot 대신 NavigationView 사용

피벗 컨트롤 만들기

Pivot 항목

Pivot 헤더

Pivot 상호 작용

추가 리소스

다음을 통해 공유

피벗

올바른 컨트롤인가요?

UWP 및 WinUI 2

Pivot 대신 NavigationView 사용

피벗 컨트롤 만들기

Pivot 항목

Pivot 헤더

Pivot 상호 작용

관련 항목

추가 리소스