TabView

[アーティクル]
04/06/2023

TabView コントロールは、一連のタブとそれぞれの内容を表示するための手段です。 TabView は、ユーザーに新しいタブを再配置したり、開いたり、閉じたりする機能を提供しながら、コンテンツの複数のページ (またはドキュメント) を表示する場合に便利です。

TabView の例

WinUI を取得する

TabView コントロールでは、Windows アプリのための新しいコントロールと UI 機能を含む NuGet パッケージである WinUI が必要になります。インストール手順などの詳細については、「WinUI」を参照してください。

WinUI APIs: TabView クラス、TabViewItem クラス

ヒント

このドキュメントでは、XAML で muxc エイリアスを使って、プロジェクトに含めた WinUI API を表します。 Page 要素にこれを追加しました。xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

コードビハインドでは、C# でも muxc エイリアスを使って、プロジェクトに含めた WinUI API を表します。この using ステートメントは、ファイルの先頭に追加されています。using muxc = Microsoft.UI.Xaml.Controls;

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

一般に、タブ付き UI は、機能と外観が異なる 2 種類のスタイルのいずれかで提供されます。静的タブは、設定ウィンドウでよく見られるタブの種類です。通常、内容があらかじめ定義されている固定順序の複数のページが含まれます。 ドキュメントタブは、Microsoft Edge のようなブラウザーで見られるタブの種類です。ユーザーは、タブの作成、削除、再配置、ウィンドウ間でのタブの移動、タブの内容の変更を行うことができます。

TabView では、UWP アプリ用のドキュメントタブが提供されています。次のような場合は TabView を使用します。

ユーザーが、タブを動的に開いたり、閉じたり、再配置したりできる。
ユーザーが、ドキュメントや Web ページを直接タブで開くことができる。
ユーザーが、ウィンドウ間でタブをドラッグアンドドロップできる。

TabView がアプリに適していない場合は、NavigationView コントロールの使用を検討してください。

構造

下の図では、TabView コントロールの各部分を示します。 TabStrip にはヘッダーとフッターがありますが、ドキュメントとは異なり、TabStrip のヘッダーとフッターはそれぞれストリップの左端と右端にあります。

TabView コントロールの構造

次の図では、TabViewItem コントロールの各部分を示します。コンテンツは TabView コントロールの内部に表示されますが、コンテンツは実際には TabViewItem の一部であることに注意してください。

TabViewItem コントロールの構造

タブビューを作成する

この例では、簡単な TabView と、タブの開閉をサポートするためのイベントハンドラーを作成します。

 <muxc:TabView AddTabButtonClick="TabView_AddTabButtonClick"
               TabCloseRequested="TabView_TabCloseRequested"/>

// Add a new Tab to the TabView
private void TabView_AddTabButtonClick(muxc.TabView sender, object args)
{
    var newTab = new muxc.TabViewItem();
    newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Header = "New Document";

    // The Content of a TabViewItem is often a frame which hosts a page.
    Frame frame = new Frame();
    newTab.Content = frame;
    frame.Navigate(typeof(Page1));

    sender.TabItems.Add(newTab);
}

// Remove the requested tab from the TabView
private void TabView_TabCloseRequested(muxc.TabView sender, muxc.TabViewTabCloseRequestedEventArgs args)
{
    sender.TabItems.Remove(args.Tab);
}

動作

TabView の機能を利用または拡張する方法は多数あります。

タブの引き裂き

Windows アプリ SDK 1.6 以降、TabView は CanTearOutTabs モードをサポートしており、タブを新しいウィンドウにドラッグする機能が強化されています。この新しいオプションを有効にすると、タブドラッグは、ドラッグ中に新しいウィンドウがすぐに作成される Edge と Chrome のタブドラッグエクスペリエンスとよく似ています。これにより、ユーザーはウィンドウを画面の端にドラッグして、ウィンドウを最大化したり、1 つのスムーズな動きでスナップしたりできます。この実装ではドラッグアンドドロップ API も使用されないため、これらの API の制限の影響を受けません。

Note

管理者として管理者特権で実行されているプロセスでは、タブの破棄がサポートされます。

TabItemsSource を TabViewItemCollection にバインドする

<muxc:TabView TabItemsSource="{x:Bind TabViewItemCollection}" />

ウィンドウのタイトルバーに TabView のタブを表示する

ウィンドウのタイトルバーの下にタブ専用の行を挿入するのではなく、2 つを同じ領域に統合できます。これにより、コンテンツの縦方向の領域が節約され、最新のアプリの感じになります。

ユーザーはウィンドウをタイトルバーでドラッグしてウィンドウの位置を変更できるため、タイトルバーをタブで完全に埋めないことが重要です。そのため、タイトルバーにタブを表示する場合は、ドラッグ可能な領域として確保するタイトルバーの部分を指定する必要があります。ドラッグ可能な領域を指定しないと、タイトルバー全体がドラッグ可能になり、タブが入力イベントを受信できなくなります。 TabView をウィンドウのタイトルバーに表示する場合は、常に TabStripFooter を TabView に含めて、それをドラッグ可能な領域としてマークする必要があります。

詳しくは、「タイトルバーのカスタマイズ」をご覧ください

タイトルバーのタブ

<muxc:TabView HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <muxc:TabViewItem Header="Home" IsClosable="False">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Home" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>
    <muxc:TabViewItem Header="Document 0">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Document" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>
    <muxc:TabViewItem Header="Document 1">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Document" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>
    <muxc:TabViewItem Header="Document 2">
        <muxc:TabViewItem.IconSource>
            <muxc:SymbolIconSource Symbol="Document" />
        </muxc:TabViewItem.IconSource>
    </muxc:TabViewItem>

    <muxc:TabView.TabStripHeader>
        <Grid x:Name="ShellTitlebarInset" Background="Transparent" />
    </muxc:TabView.TabStripHeader>
    <muxc:TabView.TabStripFooter>
        <Grid x:Name="CustomDragRegion" Background="Transparent" />
    </muxc:TabView.TabStripFooter>
</muxc:TabView>

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    Window.Current.SetTitleBar(CustomDragRegion);
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (FlowDirection == FlowDirection.LeftToRight)
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayRightInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayLeftInset;
    }
    else
    {
        CustomDragRegion.MinWidth = sender.SystemOverlayLeftInset;
        ShellTitlebarInset.MinWidth = sender.SystemOverlayRightInset;
    }

    CustomDragRegion.Height = ShellTitlebarInset.Height = sender.Height;
}

注意

タイトルバーのタブがシェルコンテンツによって詰まってしまわないようにするには、左と右のオーバーレイを考慮する必要があります。 LTR レイアウトでは、右側の挿入部にキャプションボタンとドラッグ領域が含まれます。 RTL では逆になります。 SystemOverlayLeftInset と SystemOverlayRightInset の値は物理的な左と右を意味するので、RTL ではこれらも逆にします。

コントロールのオーバーフロー動作

タブバーがタブでいっぱいになったら、TabView.TabWidthMode を設定して、タブの表示方法を制御できます。

TabWidthMode の値	動作
Equal	新しいタブが追加されたら、非常に小さい最小幅になるまで、すべてのタブを横方向に縮小します。
SizeToContent	タブは、常に、アイコンとヘッダーを表示するために必要な最小サイズである "自然サイズ" になります。タブが追加されたり閉じられたりしても、拡張または縮小されません。

どちらの値を選択した場合でも、最終的にタブの数が多すぎてタブストリップに表示できなくなる可能性があります。この場合は、スクロールバンパーが表示され、ユーザーは TabStrip を左右にスクロールできます。

タブの選択に関するガイダンス

ほとんどのユーザーは、Web ブラウザーを使用して簡単にドキュメントタブを使用した経験があります。アプリでドキュメントタブを使用するとき、ユーザーは経験からタブがどのように動作するかを予期します。

ユーザーがドキュメントタブのセットを操作する方法に関係なく、常にアクティブなタブが必要になります。ユーザーが選択したタブを閉じたり、選択したタブを別のウィンドウに分割したりした場合は、別のタブがアクティブになる必要があります。TabView では、次のタブを自動的に選択することで、これが試みられます。タブが選択されていない TabView をアプリで許可する十分な理由がある場合、TabView のコンテンツ領域は単に空白になります。

TabView では、既定で多くの一般的なキーボードナビゲーションシナリオがサポートされています。このセクションでは、組み込みの機能について説明し、一部のアプリで役立つ追加機能についての推奨事項を示します。

タブとカーソルキーの動作

フォーカスが TabStrip 領域に移動すると、選択された TabViewItem がフォーカスを得ます。ユーザーは左右の方向キーを使用して、TabStrip 内の他のタブにフォーカスを移動できます (選択はされません)。矢印フォーカスはタブストリップ内でトラップされ、ある場合はタブ追加 [+] ボタンが表示されます。 Tab キーを押すとフォーカスを TabStrip 領域の外に移動することができ、フォーカスは次のフォーカス可能な要素に移動します。

Tab キーを使用してフォーカスを移動する

方向キーではフォーカスは循環しない

タブの選択

TabViewItem にフォーカスがあるときに、Space キーまたは Enter キーを押すと、その TabViewItem が選択されます。

方向キーを使用してフォーカスを移動し、Space キーを押してタブを選択します。

Space キーでタブを選択する

隣接するタブを選択するためのショートカット

Ctrl + Tab キーを押すと、次の TabViewItem が選択されます。 Ctrl + Shift + Tab キーを押すと、前の TabViewItem が選択されます。これらの目的のため、タブリストは "ループ" になっているので、最後のタブが選択されているときに次のタブを選択すると、最初のタブが選択されます。

タブを閉じる

Ctrl + F4 キーを押すと、TabCloseRequested イベントが発生します。イベントを処理し、必要に応じてタブを閉じます。

アプリ開発者向けのキーボードガイダンス

アプリケーションによっては、より高度なキーボード制御が必要になる場合があります。アプリに適している場合は、次のショートカットを実装することを検討してください。

警告

既存のアプリに TabView を追加する場合は、推奨される TabView キーボードショートカットのキーの組み合わせに対応するキーボードショートカットが、既に作成されている可能性があります。この場合は、既存のショートカットを保持するか、ユーザーに直感的なタブエクスペリエンスを提供するかを、検討する必要があります。

Ctrl + T キーが押されたら、新しいタブを開く必要があります。通常、このタブは、定義済みのドキュメントを設定されるか、またはコンテンツを選択する簡単な方法を備えて空で作成されます。ユーザーが新しいタブのコンテンツを選択する必要がある場合は、コンテンツ選択コントロールに入力フォーカスを設定することを検討します。
Ctrl + W キーが押されたら、選択されているタブを閉じる必要があります。TabView では次のタブが自動的に選択されることを思い出してください。
Ctrl + Shift + T キーが押されたら、最近閉じられたタブを開く必要があります (より正確には、最近閉じられタブと同じコンテンツで新しいタブを開きます)。最後に閉じられたタブから始めて、ショートカットが呼び出されるたびに、時間を遡って移動します。これには、最近閉じられたタブのリストを保持する必要があることに注意してください。
Ctrl + 1 キーが押されたら、タブリストの最初のタブを選択します。同様に、Ctrl + 2 キーが押されたら 2 番目のタブを選択し、Ctrl + 3 キーが押されたら 3 番目のタブを選択します。Ctrl + 8 キーマで同様です。
Ctrl + 9 キーが押されたら、リスト内のタブの数に関係なく、タブリストの最後のタブを選択します。
タブで "閉じる" 以外のコマンド (タブの複製やピン留めなど) も提供する場合は、コンテキストメニューを使用して、タブで実行できるすべての操作を表示します。

ブラウザースタイルのキーボード動作を実装する

この例では、TabView に関する上記の推奨事項がいくつか実装されています。具体的には、この例では Ctrl + T、Ctrl + W、Ctrl + 1-8、Ctrl + 9 が実装されています。

<muxc:TabView x:Name="TabRoot">
    <muxc:TabView.KeyboardAccelerators>
        <KeyboardAccelerator Key="T" Modifiers="Control" Invoked="NewTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="W" Modifiers="Control" Invoked="CloseSelectedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number1" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number2" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number3" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number4" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number5" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number6" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number7" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number8" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
        <KeyboardAccelerator Key="Number9" Modifiers="Control" Invoked="NavigateToNumberedTabKeyboardAccelerator_Invoked" />
    </muxc:TabView.KeyboardAccelerators>
    <!-- ... some tabs ... -->
</muxc:TabView>

private void NewTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    // Create new tab.
    var newTab = new muxc.TabViewItem();
    newTab.IconSource = new muxc.SymbolIconSource() { Symbol = Symbol.Document };
    newTab.Header = "New Document";

    // The Content of a TabViewItem is often a frame which hosts a page.
    Frame frame = new Frame();
    newTab.Content = frame;
    frame.Navigate(typeof(Page1));

    TabRoot.TabItems.Add(newTab);
}

private void CloseSelectedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    // Only remove the selected tab if it can be closed.
    if (((muxc.TabViewItem)TabRoot.SelectedItem).IsClosable)
    {
        TabRoot.TabItems.Remove(TabRoot.SelectedItem);
    }
}

private void NavigateToNumberedTabKeyboardAccelerator_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
{
    int tabToSelect = 0;

    switch (sender.Key)
    {
        case Windows.System.VirtualKey.Number1:
            tabToSelect = 0;
            break;
        case Windows.System.VirtualKey.Number2:
            tabToSelect = 1;
            break;
        case Windows.System.VirtualKey.Number3:
            tabToSelect = 2;
            break;
        case Windows.System.VirtualKey.Number4:
            tabToSelect = 3;
            break;
        case Windows.System.VirtualKey.Number5:
            tabToSelect = 4;
            break;
        case Windows.System.VirtualKey.Number6:
            tabToSelect = 5;
            break;
        case Windows.System.VirtualKey.Number7:
            tabToSelect = 6;
            break;
        case Windows.System.VirtualKey.Number8:
            tabToSelect = 7;
            break;
        case Windows.System.VirtualKey.Number9:
            // Select the last tab
            tabToSelect = TabRoot.TabItems.Count - 1;
            break;
    }

    // Only select the tab if it is in the list
    if (tabToSelect < TabRoot.TabItems.Count)
    {
        TabRoot.SelectedIndex = tabToSelect;
    }
}

次の方法で共有

TabView

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

構造

タブビューを作成する

動作

タブの引き裂き

TabItemsSource を TabViewItemCollection にバインドする

ウィンドウのタイトルバーに TabView のタブを表示する

コントロールのオーバーフロー動作

タブの選択に関するガイダンス

キーボードナビゲーション

タブとカーソルキーの動作

タブの選択

隣接するタブを選択するためのショートカット

タブを閉じる

アプリ開発者向けのキーボードガイダンス

ブラウザースタイルのキーボード動作を実装する

その他のリソース

次の方法で共有

TabView

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

構造

タブ ビューを作成する

動作

タブの引き裂き

TabItemsSource を TabViewItemCollection にバインドする

ウィンドウのタイトル バーに TabView のタブを表示する

コントロールのオーバーフロー動作

タブの選択に関するガイダンス

キーボード ナビゲーション

タブとカーソル キーの動作

タブの選択

隣接するタブを選択するためのショートカット

タブを閉じる

アプリ開発者向けのキー ボードガイダンス

ブラウザー スタイルのキーボード動作を実装する

関連記事

その他のリソース

タブビューを作成する

ウィンドウのタイトルバーに TabView のタブを表示する

キーボードナビゲーション

タブとカーソルキーの動作

アプリ開発者向けのキーボードガイダンス

ブラウザースタイルのキーボード動作を実装する