Kiezerbalk

Met een selectorbalk kan een gebruiker schakelen tussen een klein aantal verschillende sets of weergaven van gegevens. Eén item tegelijk kan worden geselecteerd.

Selectorbalk met knooppunten Recent, Gedeeld, Favorieten. Het knooppunt Recent is geselecteerd, zoals aangegeven door een blauwe lijn onder de tekst.

Wanneer een gebruiker een item in de kiezerbalk selecteert, wijzigt u de weergave meestal door:

navigeren tussen verschillende pagina's in uw app.
de gegevens wijzigen die worden weergegeven in een verzamelingsbeheer.

De kiezerbalk is een lichtgewicht besturingselement dat ondersteuning biedt voor een pictogram en tekst. Het is bedoeld om een beperkt aantal opties te presenteren, zodat items niet opnieuw worden gerangschikt om aan te passen aan verschillende venstergrootten.

Is dit de juiste controle?

Gebruik een selectorbalk als u een gebruiker wilt laten navigeren tussen een beperkt aantal weergaven of pagina's en slechts één optie tegelijk kan worden geselecteerd.

Enkele voorbeelden zijn:

Schakelen tussen pagina's 'Recent', 'Gedeeld' en 'Favorieten', waarbij elke pagina een unieke lijst met inhoud weergeeft.
Schakelen tussen de weergave 'Alle', 'Ongelezen', 'Gemarkeerd' en 'Urgent', waarbij elke weergave een uniek gefilterde lijst met e-mailitems weergeeft.

Wanneer moet een ander besturingselement worden gebruikt?

Er zijn enkele scenario's waarin een ander besturingselement geschikter kan zijn voor gebruik.

Gebruik NavigationView wanneer u consistente app-navigatie op het hoogste niveau nodig hebt die zich aanpast aan verschillende venstergrootten.
Gebruik TabView wanneer de gebruiker nieuwe weergaven van de inhoud moet kunnen openen, sluiten, opnieuw ordenen of verwijderen.
Gebruik PipsPager wanneer u regelmatig paginering van één gegevensweergave nodig hebt.
Gebruik RadioButtons wanneer een optie niet standaard is geselecteerd en context niet gerelateerd is aan paginanavigatie.

Een besturingselement SelectorBar maken

Belangrijke API's: klasse SelectorBar, eigenschap Items, SelectionChanged-gebeurtenis, klasse SelectorBarItem

Open de App WinUI 3 Gallery en zie de SelectorBar in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Met deze XAML maakt u een eenvoudig besturingselement selectorbalk met drie secties met inhoud.

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

Hier ziet u hoe u een SelectorBarItem toevoegt in code.

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

SelectorBar-items

U vult de verzameling Items van SelectorBar in met SelectorBarItem-objecten . U kunt dit rechtstreeks in XAML of in code doen. Omdat het is bedoeld om een beperkt aantal opties weer te geven, heeft ItemsSource SelectorBar geen eigenschap voor binding met een externe verzameling items.

Iteminhoud

De klasse SelectorBarItem bevat eigenschappen voor tekst en pictogram die u gebruikt om de inhoud van uw kiezerbalk in te stellen. U kunt een of beide eigenschappen instellen; We raden u echter aan de Text eigenschap in te stellen om het item zinvoller te maken.

De Icon eigenschap gebruikt een IconElement, zodat u een van deze afgeleide pictogramtypen kunt gebruiken:

Opmerking

SelectorBarItem neemt de eigenschap Child over van ItemContainer. U kunt deze eigenschap gebruiken om de inhoud in te stellen, maar dit wordt niet aanbevolen. Inhoud die op deze manier is ingesteld, krijgt niet de stijl- en visuele statussen van de selectorBarItem-besturingselementsjabloon.

Itemselectie

U kunt de eigenschap SelectedItem gebruiken om het actieve item van de SelectorBar op te halen of in te stellen. Dit wordt gesynchroniseerd met de eigenschap SelectorBarItem van IsSelected . Als u een van beide eigenschappen instelt, wordt de andere automatisch bijgewerkt.

Wanneer de selectorbalk de focus krijgt en SelectedItem is null, SelectedItem wordt deze automatisch ingesteld op het eerste focusbare exemplaar in de verzameling Items , indien aanwezig.

Wanneer het geselecteerde item uit de Items verzameling wordt verwijderd, wordt de SelectedItem eigenschap ingesteld op null. Als SelectedItem deze optie is ingesteld op null terwijl de selectorbalk de focus heeft, heeft SelectorBar geen item geselecteerd, maar blijft de focus behouden.

Als SelectedItem u een element instelt dat zich momenteel niet in de Items verzameling bevindt, wordt er een uitzondering gegenereerd.

Er is geen SelectedIndex eigenschap, maar u kunt de index van het SelectedItem volgende ophalen:

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

Selectie is gewijzigd

Behandel het SelectionChanged-event om te reageren op de selectie van gebruikers en te wijzigen wat aan de gebruiker wordt getoond. De SelectionChanged gebeurtenis wordt gegenereerd wanneer een item op een van de volgende manieren wordt geselecteerd:

Ui-automatisering
Tabfocus (en een nieuw item is geselecteerd)
Navigatie links en rechts in de kiezerbalk
Getikte gebeurtenis via muis of aanraken
Programmatische selectie (via de eigenschap SelectorBar.SelectedItem of de eigenschap IsSelected van SelectorBarItem).

Wanneer een gebruiker een item selecteert, wijzigt u de weergave doorgaans door te navigeren tussen verschillende pagina's in uw app of door de gegevens te wijzigen die worden weergegeven in een verzamelingsbeheer. Voorbeelden van beide worden hier weergegeven.

Navigeren met overgangsanimaties

Aanbeveling

U vindt deze voorbeelden op de pagina SelectorBar van de WinUI Gallery-app. Gebruik de WinUI Gallery-app om de volledige code uit te voeren en weer te geven.

In dit voorbeeld ziet u hoe u de gebeurtenis SelectionChanged kunt verwerken om tussen verschillende pagina's te navigeren. In de navigatie wordt de SlideNavigationTransitionEffect gebruikt om de pagina's van links of rechts naar wens te verschuiven.

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

Verschillende verzamelingen weergeven in een ItemsView

In dit voorbeeld ziet u hoe u de gegevensbron van een ItemsView wijzigt wanneer de gebruiker een optie selecteert in de selectorbalk.

<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 en WinUI 2

Belangrijk

Het besturingselement SelectorBar is niet beschikbaar voor UWP en WinUI 2. Zie NavigationView of TabView voor alternatieven.

SelectorBar-klasse
basisbeginselen van navigatieontwerp

Feedback

Is deze pagina nuttig?

Last updated on 2025-11-25