ピボット

Pivot コントロールを使用すると、少数のコンテンツセクション間のタッチスワイプが可能になります。

既定のフォーカスで、選択したヘッダーに下線が付く

これは適切なコントロールですか?

Warnung

ピボットコントロールは、Windows 11 デザインパターンには推奨されません。代わりに、次のいずれかの代替方法の使用が強く推奨されます。

SelectorBar コントロール。
NavigationView (例では Pivot セクションではなく NavigationView を使用 )
タブビュー

タブ付き UI を作成するには、 TabView コントロールを使用します。

一般的なトップナビゲーションパターンを実現するには、 NavigationView を使用することをお勧めします。これは、さまざまな画面サイズに自動的に適応し、より大きなカスタマイズを可能にします。

NavigationView と Pivot の主な違いは次のとおりです。

Pivot では、タッチスワイプによる項目の切り替えがサポートされます。
Pivot では、オーバーフローした項目はカルーセルとして表示されますが、NavigationView では、ユーザーがすべての項目を確認できるように、メニュードロップダウンオーバーフローが使用されます。
Pivot ではコンテンツセクション間のナビゲーションが処理されますが、NavigationView では、ナビゲーション動作をより厳密に制御することができます。

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 コントロールの組み込みナビゲーションエクスペリエンスを模倣し、そこからコンテンツセクション間のタッチスワイプエクスペリエンスを差し引きます。ただし、ご覧のとおり、アニメーション化された遷移、ナビゲーションパラメーター、スタック機能など、いくつかの点もカスタマイズできます。

Pivot コントロールを作成する

Warnung

ピボットコントロールは、Windows 11 デザインパターンには推奨されません。代わりに、次のいずれかの代替方法の使用が強く推奨されます。

SelectorBar コントロール。
NavigationView (例では 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>

ピボットアイテム

ピボットは ItemsControl であるため、任意の種類の項目のコレクションを含めることができます。明示的に PivotItem でない項目を Pivot に追加すると、暗黙的に PivotItem にラップされます。ピボットは多くの場合、コンテンツのページ間を移動するために使用されるため、Xaml UI 要素を Items コレクションに直接設定するのが一般的です。または、 ItemsSource プロパティをデータソースに設定することもできます。 ItemsSource にバインドされたアイテムは任意の型にすることができますが、明示的に PivotItems でない場合は、 ItemTemplate と HeaderTemplate を定義して、アイテムの表示方法を指定する必要があります。

SelectedItem プロパティを使用すると、ピボットのアクティブなアイテムを取得または設定できます。アクティブな項目のインデックスを取得または設定するには、 SelectedIndex プロパティを使用します。

Pivot のヘッダー

LeftHeader プロパティと RightHeader プロパティを使用して、ピボットヘッダーに他のコントロールを追加できます。

たとえば、ピボットの 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の対話操作

コントロールには、次のタッチジェスチャ操作が備わっています。

ピボット項目のヘッダーをタップすると、そのヘッダーのセクションコンテンツに移動します。
ピボット項目ヘッダーで左または右にスワイプすると、隣接するセクションに移動します。
セクションコンテンツを左または右にスワイプすると、隣接するセクションに移動します。

コントロールには、次の 2 つのモードがあります。

固定

すべてのピボットヘッダーが表示領域に収まる場合、ピボットは静止します。
ピボットのラベルをタップすると対応するページに移動しますが、Pivot 自体は動きません。アクティブなピボットが強調表示されます。

回転木馬

すべてのピボットヘッダーが表示領域に収まらない場合、Pivot はカルーセル表示されます。
ピボットのラベルをタップすると対応するページに移動し、アクティブなピボットのラベルが先頭位置に移動して表示されます。
カルーセル内のピボット項目は、最後のピボットセクションに到達すると先頭にループします。

ヒント

カルーセルモードを使用する場合、5 個を超えるヘッダーを使用することは避けてください。5 個を超えてループすると混乱を招くことがあります。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-05