セレクターバー

セレクターバーを使用すると、ユーザーは少数の異なるセットまたはデータビューを切り替えることができます。一度に 1 つの項目を選択できます。

[最近]、[共有]、[お気に入り] の各ノードを含むセレクターバー。テキストの下に青い線で示されているように、[最近使った項目] ノードが選択されています。

ユーザーがセレクターバーで項目を選択すると、通常、次のいずれかの方法でビューが変更されます。

アプリ内の異なるページ間を移動する。
コレクションコントロールに表示されるデータを変更する。

セレクターバーは、アイコンとテキストをサポートする軽量コントロールです。これは、さまざまなウィンドウサイズに合わせて項目を再配置しないように、限られた数のオプションを提示することを目的としています。

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

SelectorBar は、ユーザーが限られた数のビューまたはページ間を移動できるようにする場合に使用します。一度に選択できるオプションは 1 つだけです。

いくつかの例を次に示します。

[最近]、[共有]、[お気に入り] の各ページを切り替えると、各ページに一意のコンテンツの一覧が表示されます。
[すべて]、[未読]、[フラグあり]、[緊急] の各ビューを切り替えると、各ビューに一意にフィルター処理されたメールアイテムの一覧が表示されます。

別のコントロールを使用する必要がある場合

別のコントロールがより適切に使用できるシナリオがいくつかあります。

さまざまなウィンドウサイズに適応する一貫性のある最上位レベルのアプリナビゲーションが必要な場合は、 NavigationView を使用します。
ユーザーがコンテンツの新しいビューを開く、閉じる、並べ替える、または破棄できる必要がある場合は、 TabView を使用します。
1 つのデータビューの定期的な改ページが必要な場合は、 PipsPager を使用します。
オプションが既定で選択されておらず、コンテキストがページナビゲーションに関連しない場合は、 RadioButtons を使用します。

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

重要な API: SelectorBar クラス、 Items プロパティ、 SelectionChanged イベント、 SelectorBarItem クラス

WinUI 3 ギャラリーアプリを開き、SelectorBar の動作を確認する

WinUI 3 ギャラリー アプリには、WinUI コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを参照します。

この XAML は、3 つのセクションのコンテンツを含む基本的な SelectorBar コントロールを作成します。

<SelectorBar x:Name="SelectorBar">
    <SelectorBarItem x:Name="SelectorBarItemRecent" 
                     Text="Recent" Icon="Clock"/>
    <SelectorBarItem x:Name="SelectorBarItemShared" 
                     Text="Shared" Icon="Share"/>
    <SelectorBarItem x:Name="SelectorBarItemFavorites" 
                     Text="Favorites" Icon="Favorite"/>
</SelectorBar>

コードに SelectorBarItem を追加する方法を示します。

SelectorBarItem newItem = new SelectorBarItem()
{
    Text = "New Item",
    Icon = new SymbolIcon(Symbol.Add)
};
selectorBar.Items.Add(newItem);

SelectorBar 項目

SelectorBar Items コレクションに SelectorBarItem オブジェクトを設定します。これは、XAML またはコードで直接行うことができます。制限された数のオプションを表示することを目的としているため、SelectorBar には、項目の外部コレクションにバインドするための ItemsSource プロパティはありません。

アイテムのコンテンツ

SelectorBarItem クラスは、セレクターバーの内容を設定するために使用する Text プロパティと Icon プロパティを提供します。一方または両方のプロパティを設定できます。ただし、 Text プロパティを設定して、項目をより意味のあるものにすることをお勧めします。

Icon プロパティは IconElement を受け取るので、次の派生アイコンの種類のいずれかを使用できます。

注

SelectorBarItem は、ItemContainer から Child プロパティを継承します。このプロパティを使用してコンテンツを設定できますが、これはお勧めしません。この方法で設定されたコンテンツは、SelectorBarItem コントロールテンプレートによって提供されるスタイルと表示状態を取得しません。

項目の選択

SelectedItem プロパティを使用して、SelectorBar のアクティブな項目を取得または設定できます。これは、SelectorBarItem の IsSelected プロパティと同期されます。いずれかのプロパティを設定すると、もう一方のプロパティが自動的に更新されます。

SelectorBar がフォーカスを取得し、 SelectedItem が nullされるたびに、 SelectedItem は Items コレクション内の最初のフォーカス可能なインスタンス (存在する場合) に自動的に設定されます。

選択した項目が Items コレクションから削除されるたびに、 SelectedItem プロパティは null に設定されます。 SelectorBar にフォーカスがある間に SelectedItem が null に設定されている場合、SelectorBar には項目は選択されませんが、フォーカスは保持されます。

Items コレクションに現在存在しない要素に SelectedItem を設定すると、例外がスローされます。

SelectedIndexプロパティはありませんが、次のようにSelectedItemのインデックスを取得できます。

int currentSelectedIndex = 
    selectorBar.Items.IndexOf(selectorBar.SelectedItem);

選択範囲が変更されました

SelectionChanged イベントを処理して、ユーザーの選択に応答し、ユーザーに表示される内容を変更します。 SelectionChanged イベントは、次のいずれかの方法で項目が選択されたときに発生します。

UIオートメーション (UI オートメーション)
タブフォーカス (および新しい項目が選択されている)
SelectorBar 内の左右のナビゲーション
マウスまたはタッチによるタップされたイベント
プログラムによる選択 ( SelectorBar.SelectedItem プロパティまたは SelectorBarItem の IsSelected プロパティのいずれか)。

ユーザーが項目を選択すると、通常、アプリ内の異なるページ間を移動するか、コレクションコントロールに表示されるデータを変更してビューを変更します。両方の例を次に示します。

切り替えアニメーションを使用して移動する

ヒント

これらの例は、 WinUI 3 ギャラリーアプリの SelectorBar ページにあります。 WinUI 3 ギャラリーアプリを使用して、完全なコードを実行して表示します。

この例では、 SelectionChanged イベントを処理してさまざまなページ間を移動する方法を示します。ナビゲーションでは、 SlideNavigationTransitionEffect を使用して、必要に応じてページを左または右からスライドインします。

<SelectorBar x:Name="SelectorBar2" 
             SelectionChanged="SelectorBar2_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPage1" Text="Page1" 
                     IsSelected="True" />
    <SelectorBarItem x:Name="SelectorBarItemPage2" Text="Page2" />
    <SelectorBarItem x:Name="SelectorBarItemPage3" Text="Page3" />
    <SelectorBarItem x:Name="SelectorBarItemPage4" Text="Page4" />
    <SelectorBarItem x:Name="SelectorBarItemPage5" Text="Page5" />
</SelectorBar>

<Frame x:Name="ContentFrame" IsNavigationStackEnabled="False" />

int previousSelectedIndex = 0;

private void SelectorBar2_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    SelectorBarItem selectedItem = sender.SelectedItem;
    int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
    System.Type pageType;

    switch (currentSelectedIndex)
    {
        case 0:
            pageType = typeof(SamplePage1);
            break;
        case 1:
            pageType = typeof(SamplePage2);
            break;
        case 2:
            pageType = typeof(SamplePage3);
            break;
        case 3:
            pageType = typeof(SamplePage4);
            break;
        default:
            pageType = typeof(SamplePage5);
            break;
    }

    var slideNavigationTransitionEffect = 
            currentSelectedIndex - previousSelectedIndex > 0 ? 
                SlideNavigationTransitionEffect.FromRight : 
                SlideNavigationTransitionEffect.FromLeft;

    ContentFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() 
                            { Effect = slideNavigationTransitionEffect });

    previousSelectedIndex = currentSelectedIndex;
}

ItemsView に異なるコレクションを表示する

この例では、ユーザーが SelectorBar でオプションを選択したときに ItemsView のデータソースを変更する方法を示します。

<SelectorBar x:Name="SelectorBar3" 
             SelectionChanged="SelectorBar3_SelectionChanged">
    <SelectorBarItem x:Name="SelectorBarItemPink" Text="Pink"
                     IsSelected="True"/>
    <SelectorBarItem x:Name="SelectorBarItemPlum" Text="Plum"/>
    <SelectorBarItem x:Name="SelectorBarItemPowderBlue" Text="PowderBlue"/>
</SelectorBar>

<ItemsView x:Name="ItemsView3" 
           ItemTemplate="{StaticResource ColorsTemplate}"/>
    <ItemsView.Layout>
        <UniformGridLayout/>
    </ItemsView.Layout>
</ItemsView/>

private void SelectorBar3_SelectionChanged
             (SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
    if (sender.SelectedItem == SelectorBarItemPink)
    {
        ItemsView3.ItemsSource = PinkColorCollection;
    }
    else if (sender.SelectedItem == SelectorBarItemPlum)
    {
        ItemsView3.ItemsSource = PlumColorCollection;
    }
    else
    {
        ItemsView3.ItemsSource = PowderBlueColorCollection;
    }
}

フィードバック

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

Last updated on 2026-03-11