Udostępnij przez

Pasek selektora

Pasek selektora umożliwia użytkownikowi przełączanie się między niewielką liczbą różnych zestawów lub widoków danych. Można wybrać jeden element jednocześnie.

Pasek selektora z węzłami Ostatnie, Udostępnione, Ulubione. Węzeł Ostatnie jest zaznaczony, zgodnie z niebieską linią pod tekstem.

Gdy użytkownik wybierze element na pasku selektora, zazwyczaj zmienia widok według jednego z następujących elementów:

  • przechodzenie między różnymi stronami w aplikacji.
  • zmiana danych wyświetlanych w kontrolce kolekcji.

Pasek selektora to kontrolka o lekkiej wadze, która obsługuje ikonę i tekst. Ma na celu przedstawienie ograniczonej liczby opcji, dzięki czemu nie zmienia kolejności elementów w celu dostosowania do różnych rozmiarów okien.

Czy jest to właściwa kontrola?

Użyj selektora, jeśli chcesz zezwolić użytkownikowi na nawigowanie między ograniczoną liczbą wyświetleń lub stron, a jednocześnie można wybrać tylko jedną opcję.

Oto kilka przykładów:

  • Przełączanie między stronami "Ostatnie", "Udostępnione" i "Ulubione", na których każda strona wyświetla unikatową listę zawartości.
  • Przełączanie między widokami "Wszystkie", "Nieprzeczytane", "Oflagowane" i "Pilne", w których każdy widok wyświetla unikatowo filtrowaną listę elementów wiadomości e-mail.

Kiedy należy użyć innej kontrolki?

Istnieją pewne scenariusze, w których inna kontrolka może być bardziej odpowiednia do użycia.

  • Użyj elementu NavigationView , jeśli potrzebujesz spójnej nawigacji aplikacji najwyższego poziomu, która dostosowuje się do różnych rozmiarów okien.
  • Użyj kontrolki TabView , gdy użytkownik powinien mieć możliwość otwierania, zamykania, zmieniania kolejności lub odrywania nowych widoków zawartości.
  • Użyj narzędzia PipsPager , jeśli potrzebujesz regularnego stronicowania pojedynczego widoku danych.
  • Użyj przycisków radiowych , gdy opcja nie jest domyślnie zaznaczona, a kontekst nie jest związany z nawigacją po stronie.

Tworzenie kontrolki SelectorBar

Otwórz aplikację Galeria WinUI 3 i zobacz akcję SelektorBar

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Ten kod XAML tworzy podstawową kontrolkę SelectorBar z 3 sekcjami zawartości.

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

W tym artykule pokazano, jak dodać selektorBarItem w kodzie.

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

Elementy SelectorBar

Kolekcja SelectorBar Items zostanie wypełniona obiektami SelectorBarItem . Można to zrobić bezpośrednio w języku XAML lub w kodzie. Ponieważ ma być wyświetlana ograniczona liczba opcji, SelektorBar nie ma ItemsSource właściwości powiązania z zewnętrzną kolekcją elementów.

Zawartość elementu

Klasa SelectorBarItem udostępnia właściwości Text i Icon , których używasz do ustawiania zawartości paska selektora. Można ustawić jedną lub obie właściwości; zalecamy jednak ustawienie Text właściwości , aby element był bardziej zrozumiały.

Właściwość Icon przyjmuje element IconElement, aby można było użyć dowolnego z następujących typów ikon pochodnych:

Uwaga / Notatka

SelectorBarItem dziedziczy właściwość Child z elementu ItemContainer. Tej właściwości można użyć do ustawienia zawartości, ale nie zalecamy tego. Zestaw zawartości w ten sposób nie uzyska stanów stylów i wizualizacji dostarczonych przez szablon kontrolki SelectorBarItem.

Wybór elementu

Możesz użyć właściwości SelectedItem , aby pobrać lub ustawić aktywny element SelektorBar. Jest to synchronizowane z właściwością IsSelected SelectorBarItem. Jeśli ustawisz jedną z tych właściwości, druga zostanie automatycznie zaktualizowana.

Za każdym razem, gdy pasek selektora ma fokus i SelectedItem ma nullwartość , SelectedItem jest automatycznie ustawiany na pierwsze wystąpienie z możliwością koncentracji uwagi w kolekcji Items , jeśli istnieje.

Za każdym razem, gdy wybrany element zostanie usunięty z Items kolekcji, właściwość jest ustawiona SelectedItem na nullwartość . Jeśli SelectedItem jest ustawiona null wartość , gdy pasek selektora ma fokus, selektorbar nie będzie miał zaznaczonego elementu, ale zachowuje fokus.

Ustawienie SelectedItem elementu, który nie znajduje się obecnie w Items kolekcji, zgłasza wyjątek.

Nie ma SelectedIndex właściwości, ale możesz uzyskać indeks podobny do następującego SelectedItem :

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

Wybór został zmieniony

Obsłuż zdarzenie SelectionChanged , aby odpowiedzieć na wybór użytkowników i zmienić wyświetlane dane użytkownikowi. Zdarzenie SelectionChanged jest zgłaszane po wybraniu elementu na dowolny z następujących sposobów:

  • Automatyzacja interfejsu użytkownika
  • Fokus karty (i jest zaznaczony nowy element)
  • Nawigacja po lewej i prawej stronie na pasku selektora
  • Naciśnięcie zdarzenia za pomocą myszy lub dotyku
  • Wybór programowy (za pomocą właściwości SelectorBar.SelectedItem lub Właściwości IsSelected SelectorBarItem).

Gdy użytkownik wybierze element, zazwyczaj zmienia się widok, przechodząc między różnymi stronami w aplikacji lub zmieniając dane wyświetlane w kontrolce kolekcji. Przykłady obu przedstawiono tutaj.

Wskazówka

Te przykłady można znaleźć na stronie SelectorBar aplikacji z galerii WinUI. Użyj aplikacji Galeria WinUI, aby uruchomić i wyświetlić pełny kod.

W tym przykładzie pokazano obsługę zdarzenia SelectionChanged w celu nawigowania między różnymi stronami. Nawigacja używa elementu SlideNavigationTransitionEffect , aby odpowiednio przesunąć strony z lewej lub prawej strony.

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

Wyświetlanie różnych kolekcji w widoku ItemsView

W tym przykładzie pokazano, jak zmienić źródło danych elementu ItemsView , gdy użytkownik wybierze opcję na pasku selektora.

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

Ważne

Kontrolka SelectorBar nie jest dostępna dla platformy UWP i WinUI 2. Aby uzyskać alternatywy, zobacz NavigationView lub TabView.

  • Last updated on