SelectorBar

Mit einer Selektionsleiste kann der Benutzer zwischen einer kleinen Anzahl verschiedener Datensätze oder Ansichten wechseln. Es kann jeweils nur ein Element ausgewählt werden.

Wenn ein Benutzer ein Element in der Selektionsleiste auswählt, ändern Sie die Ansicht in der Regel entweder durch:

• die Navigation zwischen verschiedenen Seiten in Ihrer Anwendung.
• Änderung der in einer Sammlungssteuerung angezeigten Daten.

Die Selektionsleiste ist ein leichtes Steuerelement, das ein Symbol und Text unterstützt. Es soll eine begrenzte Anzahl von Optionen präsentieren, sodass es die Elemente nicht neu anordnet, um sich an unterschiedliche Fenstergrößen anzupassen.

Ist dies das richtige Steuerelement?

Verwenden Sie eine SelectorBar, wenn Sie einem Benutzer die Möglichkeit geben wollen, zwischen einer begrenzten Anzahl von Ansichten oder Seiten zu navigieren und nur eine Option auf einmal ausgewählt werden kann.

Beispiele hierfür sind:

• Umschalten zwischen den Seiten „Zuletzt gesehen“, „Geteilt“ und „Favoriten“, wobei jede Seite eine eigene Liste von Inhalten anzeigt.
• Umschalten zwischen den Ansichten „Alle“, „Ungelesen“, „Markiert“ 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 die Verwendung eines anderen Steuerelements sinnvoller sein kann.

• Verwenden Sie NavigationView, wenn Sie eine konsistente App-Navigation auf oberster Ebene benötigen, die sich an unterschiedliche Fenstergrößen anpasst.
• Verwenden Sie TabView, wenn der Benutzer die Möglichkeit haben soll, neue Ansichten des Inhalts zu öffnen, zu schließen, neu anzuordnen oder abzureißen.
• Verwenden Sie PipsPager, wenn Sie eine regelmäßige Paginierung einer einzelnen Datenansicht benötigen.
• Verwenden Sie RadioButtons, wenn eine Option nicht standardmäßig ausgewählt ist und der Kontext nichts mit der Seitennavigation zu tun hat.

UWP und WinUI 2

Wichtig

Das SelectorBar-Steuerelement ist für UWP und WinUI 2 nicht verfügbar. Für Alternativen siehe NavigationView oder TabView.

Erstellen eines SelectorBar-Steuerelements

• Wichtige APIs: SelectorBar Klasse, Items Eigenschaft, SelectionChanged Ereignis, SelectorBarItem Klasse

Öffnen Sie die WinUI 3 Gallery App und sehen Sie die SelectorBar in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Dieses XAML erstellt ein einfaches SelectorBar-Steuerelement mit 3 Inhaltsbereichen.

<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 wird gezeigt, wie man ein SelectorBarItem im Code hinzufügt.

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

SelectorBar-Elemente

Sie füllen die SelectorBar Items-Sammlung mit SelectorBarItem-Objekten. Sie können dies direkt in XAML oder im Code tun. Da die SelectorBar nur eine begrenzte Anzahl von Optionen anzeigen soll, verfügt sie nicht über eine ItemsSource-Eigenschaft für die Anbindung an eine externe Sammlung von Elementen.

Inhalt des Artikels

Die SelectorBarItem-Klasse bietet die Eigenschaften Text und Icon, mit denen Sie den Inhalt Ihrer SelectorBar festlegen können. Sie können eine oder beide Eigenschaften einstellen; wir empfehlen jedoch, die Eigenschaft Text einzustellen, um das Element aussagekräftiger zu machen.

Die Eigenschaft Icon nimmt ein IconElement, sodass Sie jeden dieser abgeleiteten Icon-Typen verwenden können:

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

Hinweis

SelectorBarItem erbt die Eigenschaft Child von ItemContainer. Sie können diese Eigenschaft verwenden, um den Inhalt festzulegen, aber wir empfehlen dies nicht. Inhalte, die auf diese Weise festgelegt werden, erhalten nicht das Styling und die visuellen Zustände, die von der SelectorBarItem-Steuervorlage bereitgestellt werden.

Elementauswahl

Sie können die Eigenschaft SelectedItem verwenden, um das aktive Element der SelectorBar zu erhalten oder einzustellen. Dies wird mit der Eigenschaft IsSelected des SelectorBarItems synchronisiert. Wenn Sie eine der beiden Eigenschaften festlegen, wird die andere automatisch aktualisiert.

Immer wenn die SelectorBar den Fokus erhält und SelectedItem null ist, wird SelectedItem automatisch auf die erste fokussierbare Instanz in der Sammlung Items gesetzt, sofern eine solche existiert.

Immer wenn das ausgewählte Element aus der Sammlung Items entfernt wird, wird die Eigenschaft SelectedItem auf null gesetzt. Wenn SelectedItem auf null gesetzt wird, während die SelectorBar den Fokus hat, ist in der SelectorBar kein Element ausgewählt, aber der Fokus bleibt erhalten.

Das Setzen von SelectedItem auf ein Element, das sich nicht in der Sammlung Items 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 Ereignis SelectionChanged, um auf die Auswahl des Benutzers zu reagieren und zu ändern, was dem Benutzer angezeigt wird. Das Ereignis SelectionChanged wird ausgelöst, wenn ein Element auf eine dieser Arten ausgewählt wird:

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

Wenn ein Benutzer ein Element auswählt, ändern Sie normalerweise die Ansicht, indem Sie entweder zwischen verschiedenen Seiten in Ihrer Anwendung navigieren oder die in einem Auflistungssteuerelement angezeigten Daten ändern. Beispiele für beides werden hier gezeigt.

Navigieren mit Übergangsanimationen

Tipp

Sie finden diese Beispiele auf der SelectorBar Seite der WinUI Gallery App. Verwenden Sie die WinUI-Galerie-App, um den vollständigen Code auszuführen und anzuzeigen.

Dieses Beispiel zeigt, wie das Ereignis SelectionChanged behandelt wird, um zwischen verschiedenen Seiten zu navigieren. Die Navigation verwendet den SlideNavigationTransitionEffect, um die Seiten je nach Bedarf von links oder rechts einzuschieben.

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

Verschiedene Sammlungen in einer ItemsView anzeigen

Dieses Beispiel zeigt, wie man die Datenquelle einer ItemsView ändert, 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;
    }
}

Beispielcode herunterladen

• Beispiel für Windows-UI-Bibliothek: Hier werden alle XAML-Steuerelemente in einem interaktiven Format dargestellt.

Zugehörige Themen

• SelectorBar-Klasse
• Navigationsdesigngrundlagen