Auswahlleiste

Mit einer Auswahlleiste kann ein Benutzer zwischen einer kleinen Anzahl unterschiedlicher Gruppen oder Ansichten von Daten wechseln. Es kann jeweils ein Element ausgewählt werden.

Wenn ein Benutzer ein Element in der Auswahlleiste auswählt, ändern Sie die Ansicht in der Regel wie folgt:

• Navigieren zwischen verschiedenen Seiten in Ihrer App.
• Ändern der Daten, die in einem Sammlungssteuerelement angezeigt werden.

Die Auswahlleiste ist ein steuerelement mit geringem Gewicht, das ein Symbol und text unterstützt. Es ist beabsichtigt, eine begrenzte Anzahl von Optionen darzustellen, sodass Elemente nicht neu angeordnet werden, um sich an verschiedene Fenstergrößen anzupassen.

Ist dies das richtige Steuerelement?

Verwenden Sie eine SelectorBar, wenn Sie zulassen möchten, dass ein Benutzer zwischen einer begrenzten Anzahl von Ansichten oder Seiten navigiert, und nur eine Option kann gleichzeitig ausgewählt werden.

Einige Beispiele sind:

• Wechseln zwischen den Seiten "Zuletzt verwendet", "Freigegeben" und "Favoriten", auf denen jede Seite eine eindeutige Liste von Inhalten anzeigt.
• Wechseln zwischen den Ansichten "Alle", "Ungelesen", "Gekennzeichnet" und "Dringend", wobei jede Ansicht eine eindeutig gefilterte Liste von E-Mail-Elementen anzeigt.

Wann sollte ein anderes Steuerelement verwendet werden?

Es gibt einige Szenarien, in denen ein anderes Steuerelement für die Verwendung möglicherweise besser geeignet ist.

• Verwenden Sie NavigationView , wenn Sie eine konsistente App-Navigation auf oberster Ebene benötigen, die sich an verschiedene Fenstergrößen anpasst.
• Verwenden Sie TabView , wenn der Benutzer in der Lage sein soll, neue Ansichten des Inhalts zu öffnen, zu schließen, neu anzuordnen oder zu entfernen.
• Verwenden Sie PipsPager , wenn Sie eine normale Paginierung einer einzelnen Datenansicht benötigen.
• Verwenden Sie RadioButtons , wenn eine Option nicht standardmäßig ausgewählt ist und der Kontext nicht mit der Seitennavigation verknüpft ist.

Erstellen eines SelectorBar-Steuerelements

Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.

Dieser XAML-Code erstellt ein einfaches SelectorBar-Steuerelement mit drei Inhaltsabschnitten.

<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 erfahren Sie, wie Sie ein SelectorBarItem-Objekt im Code hinzufügen.

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

SelectorBar-Elemente

Sie füllen die SelectorBar Items-Auflistung mit SelectorBarItem-Objekten auf. Sie können dies direkt in XAML oder im Code tun. Da eine begrenzte Anzahl von Optionen angezeigt werden soll, verfügt SelectorBar nicht über eine ItemsSource Eigenschaft zum Binden an eine externe Auflistung von Elementen.

Elementinhalt

Die SelectorBarItem-Klasse stellt Text - und Icon-Eigenschaften bereit, die Sie zum Festlegen des Inhalts Der Auswahlleiste verwenden. Sie können eine oder beide Eigenschaften festlegen; Es wird jedoch empfohlen, die Text Eigenschaft so festzulegen, dass das Element aussagekräftiger wird.

Die Icon Eigenschaft verwendet ein IconElement, sodass Sie eine der folgenden abgeleiteten Symboltypen verwenden können:

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

Elementauswahl

Sie können die SelectedItem-Eigenschaft verwenden, um das aktive Element der SelectorBar abzurufen oder festzulegen. Dies wird mit der IsSelected-Eigenschaft von SelectorBarItem synchronisiert. Wenn Sie eine der beiden Eigenschaften festlegen, wird die andere automatisch aktualisiert.

Wenn die SelectorBar den Fokus erhält und SelectedItemnull ist, wird SelectedItem automatisch auf die erste fokussierbare Instanz in der Items-Auflistung festgelegt, falls vorhanden.

Wenn das ausgewählte Element aus der Items-Auflistung entfernt wird, wird die SelectedItem-Eigenschaft auf null gesetzt. Wenn SelectedItem auf null gesetzt wird, während die SelectorBar den Fokus hat, wird kein Element in der SelectorBar ausgewählt, aber sie behält den Fokus.

Das Festlegen SelectedItem auf ein Element, das sich derzeit nicht in der Items Auflistung befindet, löst eine Ausnahme aus.

Es gibt keine SelectedIndex Eigenschaft, aber Sie können den Index der SelectedItem wie folgt erhalten:

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

Auswahl geändert

Behandeln Sie das SelectionChanged-Ereignis , um auf die Benutzerauswahl zu reagieren und zu ändern, was dem Benutzer angezeigt wird. Das SelectionChanged Ereignis wird ausgelöst, wenn ein Element auf eine der folgenden Arten ausgewählt wird:

• UI Automation
• Tab-Fokus (und ein neues Element wird ausgewählt)
• Linke und rechte Navigation innerhalb der Auswahlleiste
• Getipptes Ereignis durch Maus oder Toucheingabe
• Programmgesteuerte Auswahl (entweder über die SelectorBar.SelectedItem-Eigenschaft oder die IsSelected-Eigenschaft von SelectorBarItem).

Wenn ein Benutzer ein Element auswählt, ändern Sie die Ansicht in der Regel, indem Sie entweder zwischen verschiedenen Seiten in Ihrer App navigieren oder die in einem Sammlungssteuerelement angezeigten Daten ändern. Beispiele für beide werden hier gezeigt.

Navigieren mit Übergangsanimationen

In diesem Beispiel wird die Behandlung des SelectionChanged-Ereignisses zum Navigieren zwischen verschiedenen Seiten veranschaulicht. In der Navigation wird der SlideNavigationTransitionEffect verwendet, um die Seiten von links oder rechts herein gleiten zu lassen.

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

Anzeigen verschiedener Auflistungen in einer ItemsView

In diesem Beispiel wird gezeigt, wie Sie die Datenquelle einer ItemsView ändern, wenn der Benutzer eine Option in der SelectorBar auswählt.

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

Zugehörige Themen

• SelectorBar-Klasse
• Grundlagen des Navigationsdesigns