ピボット

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

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

WinUI 3 と 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>

Pivot の項目

ピボットは ItemsControl であるため、任意の種類の項目のコレクションを含めることができます。 PivotItem ではないアイテムをピボットに明示的に追加すると、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 自体は動きません。 アクティブなピボットが強調表示されます。

回転木馬

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

UWP と WinUI 2

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

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

関連トピック

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