PivotPivot

Pivot 컨트롤을 통해 작은 콘텐츠 섹션 세트에서 터치하여 살짝 밀기를 사용할 수 있습니다.The Pivot control enables touch-swiping between a small set of content sections.

기본 포커스는 선택된 헤더에 밑줄로 표시됩니다.

Windows UI 라이브러리 가져오기Get the Windows UI Library

WinUI 로고

Windows UI 라이브러리 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. 자세한 내용은 모서리 반경을 참조하세요.For more info, see Corner radius. WinUI는 Windows 앱에 대한 새 컨트롤 및 UI 기능이 포함된 NuGet 패키지입니다.WinUI is a NuGet package that contains new controls and UI features for Windows apps. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요.For more info, including installation instructions, see Windows UI Library.

플랫폼 API: Pivot 클래스, NavigationView 클래스Platform APIs: Pivot class, NavigationView class

Examples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

XAML 컨트롤 갤러리 앱이 설치된 경우 여기를 클릭하여 앱을 열고 Pivot 컨트롤의 기능을 확인합니다.If you have the XAML Controls Gallery app installed, click here to open the app and see the Pivot control in action.

NavigationView와 마찬가지로, Pivot 컨트롤은 선택한 항목에 밑줄을 표시합니다.The Pivot control, just like NavigationView, underlines the selected item.

기본 포커스는 선택된 헤더에 밑줄로 표시됩니다.

올바른 컨트롤인가요?Is this the right control?

일반적인 최상위 탐색 및 탭 패턴을 얻으려면 다양한 화면 크기에 맞게 자동으로 조정되고 더 많은 사용자 지정을 허용하는 NavigationView를 사용하는 것이 좋습니다.To achieve common top navigation and tabs patterns, we recommend using NavigationView, which automatically adapts to different screen sizes and allows for greater customization.

그러나 탐색에 터치하여 살짝 밀기가 필요한 경우 Pivot을 사용하는 것이 좋습니다.However, if your navigation requires touch-swiping, we recommend using Pivot.

NavigationView 및 Pivot 컨트롤 간의 다른 주요 차이점은 기본 오버플로 동작과 탐색 API입니다.The other key differences between the NavigationView and Pivot controls are the default overflow behavior and the navigation API:

  • NavigationView는 사용자가 모든 항목을 볼 수 있도록 메뉴 드롭다운 오버플로를 사용하는 반면, Pivot은 오버플로 항목을 캐러셀로 표시합니다.Pivot carousels overflow items, while NavigationView uses a menu dropdown overflow so that users can see all items.
  • NavigationView를 사용하면 탐색 동작을 더 완벽하게 제어할 수 있는 반면, Pivot은 콘텐츠 섹션 간의 탐색을 처리합니다.Pivot handles navigation between content sections, while NavigationView allows for more control over navigation behavior.

Pivot 대신 NavigationView 사용Use NavigationView instead of Pivot

앱의 UI가 Pivot 컨트롤을 사용하는 경우, 아래 코드를 사용하여 Pivot을 NavigationView로 변환할 수 있습니다.If your app's UI uses the Pivot control, then you can convert Pivot to NavigationView with the code below.

이 XAML은 컨트롤 만들기의 예제 Pivot과 같이 콘텐츠 섹션 3개가 있는 NavigationView를 만듭니다.This XAML creates a NavigationView with 3 sections of content, like the example Pivot in Create a pivot control.

<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>
</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를 사용하면 탐색 사용자 지정을 더 완벽하게 제어할 수 있으며, 해당 코드 숨김이 필요합니다.NavigationView provides more control over navigation customization and requires corresponding code-behind. 위 XAML의 경우 다음 코드 숨김을 사용합니다.To accompany the above XAML, use the following code-behind:

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

    navOptions.IsNavigationStackEnabled = False;

    switch (item.Name)
    {
        case "Section1Content":
            ContentFrame.NavigateToType(typeof(Section1Page), null, navOptions);
            break;

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

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

이 코드는 콘텐츠 섹션 간의 터치하여 살짝 밀기 환경을 제외하고 Pivot 컨트롤의 기본 제공 탐색 환경을 모방합니다.This code mimics the Pivot control's built-in navigation experience, minus the touch-swiping experience between content sections. 그러나 애니메이션 효과를 준 전환, 탐색 매개 변수, 스택 기능을 포함하여 여러 가지 사항을 사용자 지정할 수도 있습니다.However, as you can see, you could also customize several points, including the animated transition, navigation parameters, and stack capabilities.

피벗 컨트롤 만들기Create a pivot control

이 코드는 콘텐츠 섹션 3개가 있는 기본 Pivot 컨트롤을 만듭니다.This code creates a basic Pivot control with 3 sections of content.

<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 items

피벗은 ItemsControl이므로 모든 유형의 항목 컬렉션을 포함할 수 있습니다.Pivot is an ItemsControl, so it can contain a collection of items of any type. 피벗에 추가한 항목 중 명시적으로 PivotItem이 아닌 항목은 모두 PivotItem에 암시적으로 래핑됩니다.Any item you add to the Pivot that is not explicitly a PivotItem is implicitly wrapped in a PivotItem. 피벗은 콘텐츠 페이지 간 탐색에 사용되는 경우가 많기 때문에 Items 컬렉션에 XAML UI 요소를 직접 채우는 것이 일반적입니다.Because a Pivot is often used to navigate between pages of content, it's common to populate the Items collection directly with XAML UI elements. 또는 데이터 원본에 ItemsSource 속성을 설정할 수 있습니다.Or, you can set the ItemsSource property to a data source. ItemsSource에 바인딩된 항목은 임의 유형일 수 있지만 명시적으로 PivotItems가 아닌 경우 ItemTemplateHeaderTemplate을 정의하여 항목의 표시 방법을 지정해야 합니다.Items bound in the ItemsSource can be of any type, but if they aren't explicitly PivotItems, you must define an ItemTemplate and HeaderTemplate to specify how the items are displayed.

SelectedItem 속성을 사용하여 피벗의 활성 항목을 가져오거나 설정할 수 있습니다.You can use the SelectedItem property to get or set the Pivot's active item. 활성 항목의 인덱스를 설정하려면 SelectedIndex 속성을 사용합니다.Use the SelectedIndex property to get or set the index of the active item.

피벗 헤더Pivot headers

LeftHeaderRightHeader 속성을 사용하여 피벗 헤더에 다른 컨트롤을 추가할 수 있습니다.You can use the LeftHeader and RightHeader properties to add other controls to the Pivot header.

예를 들어 피벗의 RightHeader에 CommandBar를 추가할 수 있습니다.For example, you can add a CommandBar in the Pivot's RightHeader.

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

피벗 조작Pivot interaction

컨트롤을 통해 다음 터치 제스처 조작 기능을 사용할 수 있습니다.The control features these touch gesture interactions:

  • 피벗 컨트롤 헤더를 탭하면 해당 헤더의 섹션 콘텐츠로 이동합니다.Tapping on a pivot item header navigates to that header's section content.
  • 피벗 항목 헤더를 왼쪽 또는 오른쪽으로 살짝 밀면 인접한 섹션으로 이동합니다.Swiping left or right on a pivot item header navigates to the adjacent section.
  • 섹션 콘텐츠에서 왼쪽 또는 오른쪽으로 살짝 밀면 인접한 섹션으로 이동합니다.Swiping left or right on section content navigates to the adjacent section.

컨트롤은 다음 두 모드를 제공합니다.The control comes in two modes:

고정Stationary

  • 모든 피벗 헤더가 허용되는 공간 내에 맞는 경우 피벗은 고정됩니다.Pivots are stationary when all pivot headers fit within the allowed space.
  • 피벗 레이블을 탭하면 피벗 자체는 움직이지 않고 해당 페이지로 이동합니다.Tapping on a pivot label navigates to the corresponding page, though the pivot itself will not move. 활성 피벗이 강조 표시됩니다.The active pivot is highlighted.

캐러셀Carousel

  • 모든 피벗 헤더가 허용되는 공간 내에 맞지 않는 경우 피벗이 회전합니다.Pivots carousel when all pivot headers don't fit within the allowed space.
  • 피벗 레이블을 탭하면 해당 페이지로 이동하며 활성 피벗 레이블이 첫 번째 위치로 회전합니다.Tapping a pivot label navigates to the corresponding page, and the active pivot label will carousel into the first position.
  • 회전 모드에서 피벗 항목은 마지막에서부터 첫 번째 피벗 섹션까지 루핑합니다.Pivot items in a carousel loop from last to first pivot section.

참고3m 환경에서는 Pivot 헤더가 회전하면 안 됩니다.Note Pivot headers should not carousel in a 10ft environment. 앱이 Xbox에서 실행되는 경우 IsHeaderItemsCarouselEnabled 속성을 false로 설정합니다.Set the IsHeaderItemsCarouselEnabled property to false if your app will run on Xbox.

권장 사항Recommendations

  • 회전(왕복) 모드를 사용할 경우 5개를 초과하는 헤더를 사용하면 혼란이 발생할 수 있으므로 5개를 초과하는 헤더를 루핑하지 않도록 합니다.Avoid using more than 5 headers when using carousel (round-trip) mode, as looping more than 5 can become confusing.

샘플 코드 가져오기Get the sample code