選取器列

選擇器列允許使用者在少量不同的資料集或檢視之間切換。 一次可以選擇一項。

當使用者在選擇器欄中選擇某個項目時，您通常可以透過以下任一方式變更檢視：

• 在應用程式中的不同頁面之間瀏覽。
• 變更集合控制項中顯示的資料。

選擇器欄是一個輕量級控制項，支援圖示和文字。 目的是提供有限數量的選項，因此不會重新排列項目以適應不同的視窗大小。

這是正確的控制項嗎？

當您想讓使用者在有限數量的視圖或頁面之間導航並且一次只能選擇一個選項時，請使用 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，因此您可以使用下列任何衍生的圖示類型：

• AnimatedIcon
• BitmapIcon
• FontIcon
• IconSourceElement
• ImageIcon
• PathIcon
• SymbolIcon

注意

SelectorBarItem 會 從 ItemContainer 繼承 Child 屬性。 您可以使用這個屬性來設定內容，但我們不建議這麼做。 以這種方式設定的內容不會取得 SelectorBarItem 控制項範本所提供的樣式和視覺狀態。

項目選取

您可以使用 SelectedItem 屬性來取得或設定 Pivot 的使用中專案。 這會與 SelectorBarItem 的 IsSelected 屬性同步處理。 如果您設定任一屬性，則會自動更新另一個屬性。

每當 SelectorBar 取得焦點且 SelectedItem 為 null 時，就會自動設定 SelectedItem 為 Items 集合中的第一個可設定焦點執行個體，如果有的話。

每當從 Items 集合中移除選取的專案時，屬性 SelectedItem 就會設定為 null。 如果在 SelectedItem SelectorBar 有焦點時設定為 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 控制項。

相關主題

• SelectorBar 類別
• 瀏覽設計基本知識