选择器栏

选择器栏允许用户在少量不同的数据集或视图之间进行切换。一次可以选择一个项目。

具有节点“最近”、“共享”、“收藏夹”的选择器栏。选中“最近”节点，如文本下方的蓝色线条指示。

当用户在选择器栏中选择某个项时，通常可以通过以下任一方式更改视图：

在应用中的不同页面之间导航。
更改集合控件中显示的数据。

选择器栏是支持图标和文本的轻量级控件。它旨在提供有限数量的选项，因此它不会重新排列项目以适应不同的窗口大小。

这是正确的控制吗？

如果要允许用户在有限数量的视图或页面之间导航，并且一次只能选择一个选项，请使用 SelectorBar。

一些示例包括：

在“最近”、“共享”和“收藏夹”页面之间进行切换，其中每个页面显示唯一的内容列表。
在“全部”、“未读”、“已标记”和“紧急”视图之间进行切换，其中每个视图显示唯一筛选的电子邮件项列表。

何时应该使用不同的控件？

在某些情况下，其他控件可能更适合使用。

如果需要适应不同窗口大小的一致顶级应用导航，请使用 NavigationView 。
当用户应该能够打开、关闭、重新排列或撕毁内容的新视图时，请使用 TabView 。
如果需要对单个数据视图进行常规分页，请使用 PipsPager 。
默认情况下未选择某个选项且上下文与页面导航无关时，请使用 RadioButtons 。

创建 SelectorBar 控件

重要 API： SelectorBar 类、 Items 属性、 SelectionChanged 事件、 SelectorBarItem 类

打开 WinUI 3 库应用并查看 SelectorBar 的作

WinUI 3 示例集应用程序包括大多数 WinUI 3 控件、特性和功能的交互式示例。从 Microsoft 应用商店获取应用或在 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 项

使用 SelectorBarItem 对象填充 SelectorBar Items 集合。可以直接在 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。如果 SelectedItem 设置为 null SelectorBar 具有焦点时，SelectorBar 将不会选择任何项目，但保留焦点。

设置为 SelectedItem 当前不在集合中的 Items 元素将引发异常。

没有 SelectedIndex 属性，但你可以获取如下所示的 SelectedItem 索引：

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

所选内容已更改

处理 SelectionChanged 事件以响应用户选择并更改向用户显示的内容。 SelectionChanged通过以下任一方式选择项时，将引发该事件：

用户界面自动化
Tab 焦点（并且已选择新项目）
SelectorBar 中的左右导航
通过鼠标或触摸点击事件
编程选择（通过 SelectorBar.SelectedItem 属性或 SelectorBarItem 的 IsSelected 属性）。

当用户选择某个项时，通常可以通过在应用中的不同页面之间导航或更改集合控件中显示的数据来更改视图。此处显示了两者的示例。

使用过渡动画导航

小窍门

可以在 WinUI 库应用的 SelectorBar 页中找到这些示例。使用 WinUI 库应用运行并查看完整代码。

此示例演示如何处理 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;
    }
}

UWP 和 WinUI 2

重要

SelectorBar 控件不适用于 UWP 和 WinUI 2。有关替代项，请参阅 NavigationView 或 TabView。

反馈

此页面是否有帮助？

Last updated on 2025-11-25