选择器栏

项目
04/10/2024

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

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

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

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

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

这是正确的控件吗？

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

示例包括：

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

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

在某些情况下，可能更适合使用另一个控件。

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

UWP 和 WinUI 2

重要

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

创建 SelectorBar 控件

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

打开 WinUI 3 库应用，了解 SelectorBar 的实际应用。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。通过 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 项

使用 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。如果在 SelectorBar 有焦点时将 SelectedItem 设置为 null，SelectorBar 将不会选择任何项目，但保持焦点。

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

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

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

所选内容已更改

处理 SelectionChanged 事件，以响应用户选择，并更改向用户显示的内容。当以以下任何方式选择项目时，都会引发 SelectionChanged 事件：

UI 自动化
选项卡焦点（并选择一个新项目）
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;
    }
}

获取示例代码

WinUI 库示例 - 以交互式格式查看所有 XAML 控件。

通过