ピボット

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

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

WinUI と Windows App SDK を使用するときにピボットに似た UI を作成するには、 SelectorBar コントロールを使用します。

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

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

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

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

Pivot ではなく NavigationView を使用する

アプリの UI で Pivot コントロールが使用されている場合は、この例に従って Pivot を NavigationView に変換できます。

この XAML では、ピボット コントロールを作成する の例のような、コンテンツの 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 コントロールを作成する

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

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

ピボット ヘッダー

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 自体は動きません。 アクティブなピボットが強調表示されます。

回転木馬

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

UWP 用の UWP と WinUI

このコントロールの API は 、Windows.UI.Xaml.Controls 名前空間に存在します。

すべてのコントロールの最新のスタイルとテンプレートを取得するには、UWP 用の最新の WinUI を使用することをお勧めします。

関連トピック

• Pivot クラス
• セレクターバー
• ナビゲーションビュー
• タブビュー
• ナビゲーションデザインの基本