Udostępnij przez

Pole kombi i lista wyboru

Użyj pola kombi (nazywanego również listą rozwijaną), aby przedstawić listę elementów, z których użytkownik może wybrać. Pole kombi rozpoczyna się w stanie kompaktowym i rozwija się, aby wyświetlić listę wybranych elementów. Pole listy wyboru jest podobne do pola kombi, ale nie jest rozwijane i nie posiada stanu zwięzłego. Więcej informacji na temat pól listy można uzyskać na końcu tego artykułu.

Kiedy pole kombi zostanie zamknięte, wyświetla bieżący wybór lub pozostaje puste, jeśli nie ma zaznaczonego elementu. Po rozwinięciu pola kombi przez użytkownika zostanie wyświetlona lista elementów do wyboru.

Obraz listy rozwijanej w stanie kompaktowym.

Czy jest to właściwa kontrola?

  • Użyj listy rozwijanej, aby umożliwić użytkownikom wybranie pojedynczej wartości z zestawu elementów, które mogą być odpowiednio reprezentowane za pomocą pojedynczych wierszy tekstu.
  • Użyj widoku listy lub siatki zamiast rozwijanego menu, aby wyświetlić elementy zawierające wiele wierszy tekstu lub obrazów.
  • Jeśli jest mniej niż pięć elementów, rozważ użycie przycisków radiowych (jeśli można wybrać tylko jeden element) lub pól wyboru (jeśli można zaznaczyć wiele elementów).
  • Użyj pola kombi, gdy elementy wyboru mają drugorzędne znaczenie w działaniu aplikacji. Jeśli opcja domyślna jest zalecana dla większości użytkowników w większości sytuacji, wyświetlenie wszystkich elementów przy użyciu widoku listy może zwrócić większą uwagę na opcje niż to konieczne. Możesz zaoszczędzić miejsce i zminimalizować rozproszenie uwagi przy użyciu rozwijanego menu.

Przykłady

Pole kombinowane w stanie kompaktowym może wyświetlać etykietę.

Zrzut ekranu przedstawiający listę rozwijaną w stanie złożonym.

Mimo że pola kombi rozszerzają się tak, aby obsługiwały dłuższe długości ciągów, unikaj zbyt długich ciągów, które są trudne do odczytania.

Przykład listy rozwijanej z długim ciągiem tekstowym

Jeśli kolekcja w polu kombi jest wystarczająco długa, pasek przewijania pojawi się, aby ją pomieścić. Grupuj elementy logicznie na liście.

Przykład paska przewijania na liście rozwijanej

Rekomendacje

  • Ogranicz zawartość tekstową elementów pola kombi do pojedynczego wiersza.
  • Sortuj elementy na liście rozwijanej w najbardziej logicznej kolejności. Grupuj powiązane opcje i umieść najbardziej typowe opcje u góry. Sortuj nazwy w kolejności alfabetycznej, liczby w kolejności liczbowej i daty w kolejności chronologicznej.

Pola listy

Pole listy umożliwia użytkownikowi wybranie pojedynczego elementu lub wielu elementów z kolekcji. Listy wyboru są podobne do list rozwijanych, z tym że listy wyboru są zawsze otwarte — nie ma stanu zminimalizowanego dla listy wyboru. Elementy na liście można przewijać, jeśli nie ma miejsca, aby pokazać wszystko.

Czy pole listy jest właściwą kontrolką?

  • Pole listy jest przydatne, gdy elementy na liście są wystarczająco ważne, aby je wyeksponować i gdy jest wystarczająco dużo miejsca na ekranie, aby wyświetlić pełną listę.
  • Pole listy powinno zwrócić uwagę użytkownika na pełny zestaw alternatyw w ważnym wyborze. Z kolei lista rozwijana początkowo zwraca uwagę użytkownika na wybrany element.
  • Unikaj używania pola listy, jeśli:
    • Lista zawiera bardzo małą liczbę elementów. Jednokrotne pole listy, które zawsze ma te same 2 opcje, może być lepiej przedstawione jako przycisków radiowych. Należy również rozważyć użycie przycisków radiowych, gdy na liście znajduje się 3 lub 4 elementy statyczne.
    • Lista jest jednokrotnego wyboru i zawsze zawiera te same 2 opcje, które wzajemnie się wykluczają, jak "włączone" i "wyłączone". Użyj pojedynczego pola wyboru lub przełącznika.
    • Istnieje bardzo duża liczba elementów. Lepszym wyborem dla długich list jest widok siatki i widok listy. W przypadku bardzo długich list pogrupowanych danych preferowane jest powiększenie semantyczne.
    • Elementy to sąsiadujące wartości liczbowe. Jeśli tak jest, rozważ użycie suwaka .
    • Elementy wyboru mają drugorzędne znaczenie w przepływie aplikacji lub opcja domyślna jest zalecana dla większości użytkowników w większości sytuacji. Zamiast tego użyj listy rozwijanej.

Zalecenia dotyczące pól listy

  • Idealny zakres elementów w polu listy wynosi od 3 do 9.
  • Pole listy działa dobrze, gdy jego elementy mogą się dynamicznie różnić.
  • Jeśli to możliwe, ustaw rozmiar pola listy, aby nie trzeba było przesuwać ani przewijać listy elementów.
  • Sprawdź, czy cel pola listy i które elementy są aktualnie zaznaczone, jest jasne.
  • Zarezerwuj efekty wizualne i animacje w celu uzyskania informacji zwrotnych dotyczących dotyku oraz wybranego stanu elementów.
  • Ogranicz zawartość tekstową elementu pola listy do pojedynczego wiersza. Jeśli elementy są wizualizacjami, możesz dostosować rozmiar. Jeśli element zawiera wiele wierszy tekstu lub obrazów, zamiast tego użyj widoku siatki lub widoku listy.
  • Użyj czcionki domyślnej, chyba że wytyczne dotyczące marki wskazują na użycie innego.
  • Nie używaj pola listy do wykonywania poleceń ani dynamicznego pokazywania lub ukrywania innych kontrolek.

Utwórz pole kombi

Otwórz aplikację Galerii WinUI 3 i zobacz akcję ComboBox

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

Pole kombi można wypełnić, dodając obiekty bezpośrednio do kolekcji Items lub przez powiązanie właściwości ItemsSource ze źródłem danych. Elementy dodane do pola ComboBox są opakowane w kontenerach ComboBoxItem.

Oto proste pole wyboru z elementami dodanymi w języku XAML.

<ComboBox Header="Colors" PlaceholderText="Pick a color" Width="200">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>

W poniższym przykładzie pokazano powiązanie pola kombi z kolekcją obiektów FontFamily.

<ComboBox x:Name="FontsCombo" Header="Fonts" Height="44" Width="296"
          ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source"/>

ObservableCollection<FontFamily> fonts = new ObservableCollection<FontFamily>()
{
    fonts.Add(new FontFamily("Arial"));
    fonts.Add(new FontFamily("Courier New"));
    fonts.Add(new FontFamily("Times New Roman"));
};

Wybór elementu

Podobnie jak ListView i GridView, funkcja ComboBox pochodzi z Selektor, dzięki czemu można uzyskać wybór użytkownika w taki sam standardowy sposób.

Możesz pobrać lub ustawić wybrany element pola kombi za pomocą właściwości SelectedItem oraz pobrać lub ustawić indeks wybranego elementu za pomocą właściwości SelectedIndex.

Aby uzyskać wartość określonej właściwości dla wybranego elementu danych, możesz użyć właściwości SelectedValue. W tym przypadku ustaw SelectedValuePath, aby określić właściwość wybranego elementu, z której ma być pobierana wartość.

Wskazówka

Jeśli ustawisz wartość SelectedItem lub SelectedIndex, aby wskazać wybór domyślny, pojawi się wyjątek, jeśli właściwość zostanie ustawiona przed wypełnieniem kolekcji elementów pola kombi. Jeśli nie zdefiniujesz elementów w języku XAML, najlepiej obsłużyć pole kombi Załadowane zdarzenie i ustawić polecenie SelectedItem lub SelectedIndex w procedurze obsługi załadowanych zdarzeń.

Możesz powiązać te właściwości w języku XAML lub obsługiwać zdarzenie SelectionChanged, aby reagować na zmiany wyboru.

W kodzie procedury obsługi zdarzeń można uzyskać dostęp do wybranego elementu z właściwości SelectionChangedEventArgs.AddedItems. Możesz pobrać wcześniej wybrany element (jeśli istnieje) z właściwości SelectionChangedEventArgs.RemovedItems. Kolekcje AddedItems i RemovedItems zawierają tylko jeden element, ponieważ pole kombi nie obsługuje zaznaczenia wielu elementów.

W tym przykładzie pokazano, jak obsługiwać zdarzenie SelectionChanged, a także jak powiązać z wybranym elementem.

<StackPanel>
    <ComboBox x:Name="colorComboBox" Width="200"
              Header="Colors" PlaceholderText="Pick a color"
              SelectionChanged="ColorComboBox_SelectionChanged">
        <x:String>Blue</x:String>
        <x:String>Green</x:String>
        <x:String>Red</x:String>
        <x:String>Yellow</x:String>
    </ComboBox>

    <Rectangle x:Name="colorRectangle" Height="30" Width="100"
               Margin="0,8,0,0" HorizontalAlignment="Left"/>

    <TextBlock Text="{x:Bind colorComboBox.SelectedIndex, Mode=OneWay}"/>
    <TextBlock Text="{x:Bind colorComboBox.SelectedItem, Mode=OneWay}"/>
</StackPanel>

private void ColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string colorName = e.AddedItems[0].ToString();
    Color color;
    switch (colorName)
    {
        case "Yellow":
            color = Colors.Yellow;
            break;
        case "Green":
            color = Colors.Green;
            break;
        case "Blue":
            color = Colors.Blue;
            break;
        case "Red":
            color = Colors.Red;
            break;
    }
    colorRectangle.Fill = new SolidColorBrush(color);
}

SelectionChanged i nawigacja za pomocą klawiatury

Domyślnie zdarzenie SelectionChanged występuje, gdy użytkownik kliknie, stuknie lub naciśnie Enter na elemencie na liście, aby zatwierdzić swój wybór, a pole kombi zostanie zamknięte. Zaznaczenie nie zmienia się, gdy użytkownik nawiguje po otwartej liście pól kombi za pomocą strzałek klawiatury.

Aby utworzyć pole kombi, które "zmienia się na żywo", gdy użytkownik nawigować otwartą listą za pomocą klawiszy strzałek (jak w przypadku listy rozwijanej Wybór czcionki), ustaw SelectionChangedTrigger, aby Zawsze. Powoduje to wystąpienie zdarzenia SelectionChanged, gdy fokus zmieni się na inny element na otwartej liście.

Zmiana zachowania wybranego elementu

W systemie Windows 10 w wersji 1809 (SDK 17763) lub nowszej zachowanie wybranych elementów jest aktualizowane w celu obsługi edytowalnych pól kombi.

Przed wersją SDK 17763 wartość dla właściwości SelectedItem (i w związku z tym także SelectedValue i SelectedIndex) musiała być częścią kolekcji Items w polu kombi. Przy użyciu poprzedniego przykładu ustawienie colorComboBox.SelectedItem = "Pink" powoduje:

  • WybranyElement = null
  • SelectedValue = wartość pusta
  • IndeksWybrany = -1

W zestawie SDK 17763 lub nowszym, wartość właściwości SelectedItem (a zatem także SelectedValue i SelectedIndex) nie musi znajdować się w kolekcji Items listy rozwijanej. Przy użyciu poprzedniego przykładu ustawienie colorComboBox.SelectedItem = "Pink" powoduje:

  • SelectedItem = Różowy
  • SelectedValue = Różowy
  • IndeksWybrany = -1

Wyszukiwanie tekstu

Pola kombi automatycznie obsługują wyszukiwanie w swoich kolekcjach. Podczas gdy użytkownicy wpisują znaki na klawiaturze fizycznej, koncentrując się na otwartym lub zamkniętym polu kombi, kandydaci pasujący do ciągu użytkownika są pokazywani. Ta funkcja jest szczególnie przydatna podczas nawigowania po długiej liście. Na przykład, gdy użytkownik wchodzi w interakcję z listą rozwijaną zawierającą listę stanów, może nacisnąć klawisz "w", aby przywołać stan "Waszyngton" do widoku na szybki wybór. Wyszukiwanie tekstu nie uwzględnia wielkości liter.

Możesz ustawić właściwość IsTextSearchEnabled na false, aby wyłączyć tę funkcję.

Umożliwia edytowanie pola kombi

Domyślnie pole kombi umożliwia użytkownikowi wybranie z wstępnie zdefiniowanej listy opcji. Istnieją jednak przypadki, w których lista zawiera tylko podzbiór prawidłowych wartości, a użytkownik powinien mieć możliwość wprowadzania innych wartości, które nie są wymienione. Aby to umożliwić, można uczynić pole kombi edytowalnym.

Aby edytować pole kombi, ustaw właściwość IsEditable na wartość true. Następnie obsłuż zdarzenie TextSubmitted, aby pracować z wartością wprowadzoną przez użytkownika.

Domyślnie wartość SelectedItem jest aktualizowana po zatwierdzeniu tekstu niestandardowego przez użytkownika. Można zastąpić to zachowanie, ustawiając Obsłużone na prawda w argumentach zdarzenia TextSubmitted. Gdy zdarzenie zostanie oznaczone jako obsłużone, pole wyboru nie podejmie dalszych działań po zdarzeniu i pozostanie w trybie edycji. SelectedItem nie zostanie zaktualizowany.

W tym przykładzie przedstawiono proste edytowalne pole kombi. Lista zawiera proste ciągi, a każda wartość wprowadzona przez użytkownika jest używana jako wprowadzona.

Wybór "ostatnio używanych nazw" umożliwia użytkownikowi wprowadzanie ciągów niestandardowych. Lista "RecentlyUsedNames" zawiera kilka wartości, które użytkownik może wybrać, ale użytkownik może również dodać nową, niestandardową wartość. Właściwość "CurrentName" reprezentuje obecnie wprowadzoną nazwę.

<ComboBox IsEditable="true"
          ItemsSource="{x:Bind RecentlyUsedNames}"
          SelectedItem="{x:Bind CurrentName, Mode=TwoWay}"/>

Przesłany tekst

Możesz obsłużyć zdarzenie TextSubmitted, aby korzystać z wartości wprowadzonej przez użytkownika. W procedurze obsługi zdarzeń zazwyczaj sprawdzisz, czy wartość wprowadzona przez użytkownika jest prawidłowa, a następnie użyjesz wartości w aplikacji. W zależności od sytuacji możesz również dodać wartość do listy opcji kombi do użycia w przyszłości.

Zdarzenie TextSubmitted występuje po spełnieniu tych warunków:

  • Właściwość IsEditable jest true
  • Użytkownik wprowadza tekst, który nie pasuje do istniejącego wpisu na liście rozwijanej.
  • Użytkownik naciska klawisz Enter lub przenosi fokusa z pola wyboru.

Zdarzenie TextSubmitted nie występuje, jeśli użytkownik wprowadza tekst, a następnie przechodzi w górę lub w dół przez listę.

Przykład — weryfikowanie danych wejściowych i używanie ich lokalnie

W tym przykładzie selektor rozmiaru czcionki zawiera zestaw wartości odpowiadających skali rozmiaru czcionki, ale użytkownik może wprowadzać rozmiary czcionek, które nie znajdują się na liście.

Gdy użytkownik doda wartość, która nie znajduje się na liście, rozmiar czcionki zostanie zaktualizowany, ale wartość nie zostanie dodana do listy rozmiarów czcionek.

Jeśli nowo wprowadzona wartość jest nieprawidłowa, należy użyć właściwości SelectedValue, aby przywrócić właściwość Text do ostatniej znanej dobrej wartości.

<ComboBox x:Name="fontSizeComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfFontSizes}"
          TextSubmitted="FontSizeComboBox_TextSubmitted"/>

private void FontSizeComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (byte.TryParse(e.Text, out double newValue))
    {
        // Update the app's font size.
        _fontSize = newValue;
    }
    else
    {
        // If the item is invalid, reject it and revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        sender.Text = sender.SelectedValue.ToString();
        e.Handled = true;
    }
}

Przykład — weryfikowanie danych wejściowych i dodawanie ich do listy

W tym miejscu "wybór ulubionego koloru" zawiera najczęściej wybierane ulubione kolory (Czerwony, Niebieski, Zielony, Pomarańczowy), ale użytkownik może wprowadzić ulubiony kolor, który nie znajduje się na liście. Gdy użytkownik dodaje prawidłowy kolor (na przykład Różowy), nowo wprowadzony kolor zostanie dodany do listy i ustawiony jako aktywny "ulubiony kolor".

<ComboBox x:Name="favoriteColorComboBox"
          IsEditable="true"
          ItemsSource="{x:Bind ListOfColors}"
          TextSubmitted="FavoriteColorComboBox_TextSubmitted"/>

private void FavoriteColorComboBox_TextSubmitted(ComboBox sender, ComboBoxTextSubmittedEventArgs e)
{
    if (IsValid(e.Text))
    {
        FavoriteColor newColor = new FavoriteColor()
        {
            ColorName = e.Text,
            Color = ColorFromStringConverter(e.Text)
        }
        ListOfColors.Add(newColor);
    }
    else
    {
        // If the item is invalid, reject it but do not revert the text.
        // Mark the event as handled so the framework doesn't update the selected item.
        e.Handled = true;
    }
}

bool IsValid(string Text)
{
    // Validate that the string is: not empty; a color.
}

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Uwaga / Notatka

Właściwość IsEditable wymaga systemu Windows 10 w wersji 1809 (SDK 17763) lub nowszej.

WinUI 2.2 lub nowszych wersjach zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

  • Last updated on