Panel selektoru

Panel selektoru umožňuje uživateli přepínat mezi malým počtem různých sad nebo zobrazení dat. Lze vybrat jednu položku najednou.

Panel selektoru s uzly Poslední, Sdílené, Oblíbené Uzel Poslední je vybraný, jak je označeno modrou čárou pod textem.

Když uživatel vybere položku na panelu selektoru, obvykle změníte zobrazení některým z těchto položek:

Navigace mezi různými stránkami v aplikaci
změna dat zobrazených v ovládacím prvku kolekce.

Panel selektoru je lehký ovládací prvek, který podporuje ikonu a text. Jeho účelem je prezentovat omezený počet možností, takže nepřeuspořádá položky tak, aby se přizpůsobily různým velikostem oken.

Je to správná kontrola?

SelektorBar použijte, když chcete uživateli umožnit navigaci mezi omezeným počtem zobrazení nebo stránek a jedinou možností lze vybrat najednou.

Mezi příklady patří:

Přepínání mezi stránkami Poslední, Sdílené a Oblíbené, kde každá stránka zobrazuje jedinečný seznam obsahu.
Přepínání mezi zobrazeními "Vše", "Nepřečteno", "Označeno" a "Naléhavé", kde každé zobrazení zobrazuje jedinečně filtrovaný seznam e-mailových položek.

Kdy se má použít jiný ovládací prvek?

Existuje několik scénářů, ve kterých může být vhodnější použít jiný ovládací prvek.

NavigationView použijte, pokud potřebujete konzistentní navigaci aplikací nejvyšší úrovně, která se přizpůsobí různým velikostem oken.
TabView použijte, když by uživatel měl být schopen otevřít, zavřít, změnit uspořádání nebo odtrhnout nová zobrazení obsahu.
PipsPager použijte v případě, že potřebujete pravidelné stránkování jednoho zobrazení dat.
Pokud není ve výchozím nastavení vybraná možnost, použijte přepínač RadioButtons a kontext nesouvisí s navigaci na stránce.

Vytvoření ovládacího prvku SelectorBar

Důležitá rozhraní API: SelectorBar – třída, Items vlastnost, SelectionChanged event, SelectorBarItem – třída

Otevřete aplikaci Galerie WinUI 3 a podívejte se na selectorBar v akci.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Tento XAML vytvoří základní ovládací prvek SelectorBar se 3 oddíly obsahu.

<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>

To ukazuje, jak přidat SelectorBarItem v kódu.

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

Položky selectorBar

Kolekci SelectorBar Items naplníte objekty SelectorBarItem . Můžete to udělat přímo v XAML nebo v kódu. Vzhledem k tomu, že má být zobrazen omezený počet možností, selectorBar nemá ItemsSource vlastnost pro vazbu na externí kolekci položek.

Obsah položky

SelectorBarItem třída poskytuje Vlastnosti Text a Icon , které slouží k nastavení obsahu panelu selektoru. Můžete nastavit jednu nebo obě vlastnosti; Doporučujeme však nastavit Text vlastnost, aby byla položka smysluplnější.

Vlastnost Icon přebírá IconElement, takže můžete použít některý z těchto odvozených typů ikon:

Poznámka:

SelectorBarItem dědí Child vlastnost ItemContainer. Tuto vlastnost můžete použít k nastavení obsahu, ale nedoporučujeme to. Sada obsahu tímto způsobem nezískají styly a vizuální stavy poskytované šablonou ovládacího prvku SelectorBarItem.

Výběr položky

Pomocí vlastnosti SelectedItem můžete získat nebo nastavit aktivní položku SelectorBar. Tato vlastnost je synchronizována s vlastností IsSelected SelectorBarItem. Pokud nastavíte některou z vlastností, druhá se automaticky aktualizuje.

Pokaždé, když SelektorBar dostane fokus a SelectedItem je null, SelectedItem je automaticky nastaven na první fokuselnou instanci v kolekci Items , pokud existuje.

Při každém odebrání vybrané položky z Items kolekce je vlastnost nastavena SelectedItem na null. Pokud SelectedItem je nastavená možnost null Vybratbar s fokusem, selectorBar nebude mít vybranou položku, ale zachová fokus.

Nastavení SelectedItem elementu, který není aktuálně v Items kolekci vyvolá výjimku.

Neexistuje žádná SelectedIndex vlastnost, ale můžete získat index podobný SelectedItem tomuto:

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

Změna výběru

Zpracujte událost SelectionChanged tak, aby reagovala na výběr uživatelů a změnila, co se uživateli zobrazí. Událost SelectionChanged se vyvolá, když je položka vybrána některým z těchto způsobů:

Automatizace uživatelského rozhraní
Fokus tabulátoru (a je vybrána nová položka)
Navigace vlevo a vpravo v panelu SelectorBar
Klepnutí na událost myší nebo dotykem
Programový výběr (prostřednictvím vlastnosti SelectorBar.SelectedItem nebo IsSelected Vlastnosti SelectorBarItem).

Když uživatel vybere položku, obvykle změníte zobrazení tak, že přejdete mezi různými stránkami v aplikaci nebo změníte data zobrazená v ovládacím prvku kolekce. Tady jsou uvedené příklady obou.

Navigace s přechodovými animacemi

Návod

Tyto příklady najdete na stránce SelectorBar aplikace Galerie WinUI. Ke spuštění a zobrazení celého kódu použijte aplikaci Galerie WinUI.

Tento příklad ukazuje zpracování SelectionChanged události pro navigaci mezi různými stránkami. Navigace používá SlideNavigationTransitionEffect k posunutí stránek zleva nebo doprava podle potřeby.

<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;
}

Zobrazení různých kolekcí v zobrazení ItemsView

Tento příklad ukazuje, jak změnit zdroj dat ItemsView , když uživatel vybere možnost v selectorBar.

<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;
    }
}

Univerzální platforma Windows a WinUI 2

Důležité

Ovládací prvek SelectorBar není k dispozici pro UPW a WinUI 2. Alternativy najdete v části NavigationView nebo TabView.

SelectorBar – třída
Základy návrhu navigace

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-11-25