Selektorfält

Med ett selektorfält kan en användare växla mellan ett litet antal olika uppsättningar eller vyer av data. Ett objekt i taget kan väljas.

När en användare väljer ett objekt i väljarens fält ändrar du vanligtvis vyn genom att antingen:

• navigera mellan olika sidor i din app.
• ändra data som visas i en samlingskontroll.

Väljarefältet är en lättviktskontroll som stöder en ikon och text. Det är avsett att presentera ett begränsat antal alternativ så att det inte ordnar om objekt för att anpassa sig till olika fönsterstorlekar.

Är det här rätt kontroll?

Använd en SelectorBar när du vill låta en användare navigera mellan ett begränsat antal vyer eller sidor och endast ett alternativ kan väljas samtidigt.

Vissa exempel inkluderar:

• Växla mellan sidorna "Senaste", "Delad" och "Favoriter", där varje sida visar en unik lista med innehåll.
• Växla mellan vyerna "Alla", "Olästa", "Flaggade" och "Brådskande", där varje vy visar en unikt filtrerad lista över e-postobjekt.

När ska en annan kontroll användas?

Det finns vissa scenarier där en annan kontroll kan vara lämpligare att använda.

• Använd NavigationView när du behöver konsekvent appnavigering på toppnivå som anpassas till olika fönsterstorlekar.
• Använd TabView när användaren ska kunna öppna, stänga, ordna om eller ta bort nya vyer av innehållet.
• Använd PipsPager när du behöver regelbunden sidnumrering av en enda datavy.
• Använd RadioButtons när ett alternativ inte är markerat som standard och kontexten inte är relaterad till sidnavigering.

Skapa en selectorBar-kontroll

• Viktiga API:er: Klassen SelectorBar, Items-egenskapen, SelectionChanged-händelsen, klassen SelectorBarItem

Öppna WinUI 3-galleriappen och se SelectorBar i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Denna XAML skapar en grundläggande SelectorBar-kontroll med tre innehållsavsnitt.

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

Detta visar hur du lägger till en SelectorBarItem i kod.

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

SelectorBar-objekt

Du fyller i samlingen SelectorBar Items med SelectorBarItem-objekt . Du kan göra detta direkt i XAML eller i kod. Eftersom det är avsett att visa ett begränsat antal alternativ har ItemsSource SelectorBar ingen egenskap för bindning till en extern samling objekt.

Objektinnehåll

Klassen SelectorBarItem innehåller text - och ikonegenskaper som du använder för att ange innehållet i väljarens stapel. Du kan ange en eller båda egenskaperna. Vi rekommenderar dock att du anger egenskapen Text för att göra objektet mer meningsfullt.

Egenskapen Icon tar en IconElement så att du kan använda någon av dessa härledda ikontyper:

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

Anmärkning

SelectorBarItem ärver egenskapen Child från ItemContainer. Du kan använda den här egenskapen för att ange innehållet, men vi rekommenderar inte detta. Innehåll som anges på det här sättet får inte formaterings- och visuella tillstånd som tillhandahålls av kontrollmallen SelectorBarItem.

Objektval

Du kan använda egenskapen SelectedItem för att hämta eller ange selectorBars aktiva objekt. Detta synkroniseras med egenskapen SelectorBarItem IsSelected . Om du anger någon av egenskaperna uppdateras den andra automatiskt.

När SelectorBar får fokus och SelectedItem är null, SelectedItem anges automatiskt till den första fokuserbara instansen i samlingen Objekt , om det finns några.

När det markerade objektet tas bort från Items samlingen är egenskapen SelectedItem inställd på null. Om SelectedItem är inställt på null medan SelectorBar har fokus, har SelectorBar inget objekt markerat men behåller fokus.

Om du anger SelectedItem ett element som för närvarande inte finns i Items samlingen genereras ett undantag.

Det finns ingen SelectedIndex egenskap, men du kan hämta indexet för följande SelectedItem :

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

Markeringen har ändrats

Hantera händelsen SelectionChanged för att svara på användarnas val och ändra vad som visas för användaren. Händelsen SelectionChanged utlöses när ett objekt väljs på något av följande sätt:

• UI-automatisering
• Tabbfokus (och ett nytt objekt är markerat)
• Vänster och höger navigering i SelectorBar
• Knackad händelse via mus eller pek
• Programmatiskt val (antingen via egenskapen SelectorBar.SelectedItem eller Egenskapen IsSelected i SelectorBarItem).

När en användare väljer ett objekt ändrar du vanligtvis vyn genom att antingen navigera mellan olika sidor i din app eller ändra data som visas i en samlingskontroll. Exempel på båda visas här.

Navigera med övergångsanimeringar

Tips/Råd

Du hittar de här exemplen på sidan SelectorBar i WinUI Gallery-appen. Använd WinUI-galleriappen för att köra och visa den fullständiga koden.

Det här exemplet visar hur du hanterar händelsen SelectionChanged för att navigera mellan olika sidor. Navigeringen använder SlideNavigationTransitionEffect för att dra in sidorna från vänster eller höger efter behov.

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

Visa olika samlingar i en ItemsView

Det här exemplet visar hur du ändrar datakällan för en ItemsView när användaren väljer ett alternativ i 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;
    }
}

UWP och WinUI 2

Viktigt!

Kontrollen SelectorBar är inte tillgänglig för UWP och WinUI 2. Alternativ finns i Navigeringsvy eller TabView.

Relaterade ämnen

• SelectorBar-klass
• Grundläggande design för navigering