Kombinované pole a pole se seznamem

Pole se seznamem (označované také jako rozevírací seznam) slouží k zobrazení seznamu položek, ze kterých si uživatel může vybrat. Kombinované pole začíná v kompaktním stavu a rozbalí se, aby ukázalo seznam položek k výběru. Pole seznamu je podobné kombinovanému poli, ale není nesbalitelné a nemá kompaktní podobu. Další informace o seznamech najdete na konci tohoto článku.

Když je kombinované pole zavřené, zobrazí se aktuální výběr, nebo je prázdné, pokud není vybraná žádná položka. Když uživatel rozbalí kombinované pole, zobrazí seznam vybratelných položek.

Obrázek rozevíracího seznamu v kompaktním stavu.

Je to správná kontrola?

Pomocí rozevíracího seznamu umožníte uživatelům vybrat jednu hodnotu ze sady položek, které lze adekvátně reprezentovat jedním řádkem textu.
Zobrazení seznamu nebo mřížky místo pole se seznamem slouží k zobrazení položek, které obsahují více řádků textu nebo obrázků.
Pokud existuje méně než pět položek, zvažte použití přepínačů (pokud je možné vybrat pouze jednu položku) nebo zaškrtávací políčka (pokud je možné vybrat více položek).
Kombinované pole použijte, pokud jsou položky výběru v rámci vaší aplikace sekundární důležitostí. Pokud se ve většině situací doporučuje výchozí možnost pro většinu uživatelů, zobrazení všech položek pomocí zobrazení seznamu může upoutat větší pozornost na možnosti, než je potřeba. Pomocí kombinovaného pole můžete ušetřit místo a minimalizovat rušivé prvky.

Examples

Kombobox v kompaktním stavu může zobrazit nadpis.

Snímek obrazovky s rozevíracím seznamem v kompaktním stavu

I když se pole se seznamem rozšiřují tak, aby podporovala delší délky řetězců, vyhněte se příliš dlouhým řetězcům, které jsou obtížně čitelné.

Příklad rozevíracího seznamu s dlouhým textovým řetězcem

Pokud je kolekce v poli se seznamem dostatečně dlouhá, zobrazí se posuvník, který umožní procházení položkami. Seskupte položky logicky v seznamu.

Příklad posuvníku v rozevíracím seznamu

Recommendations

Omezte textový obsah položek pole se seznamem na jeden řádek.
Seřaďte položky v kombinovaném poli v nejlogičtějším pořadí. Seskupte související možnosti a umístěte nejběžnější možnosti na začátek. Seřaďte jména v abecedním pořadí, čísla v číselném pořadí a kalendářní data v chronologickém pořadí.

Seznamová pole

Seznam umožňuje uživateli zvolit jednu položku nebo více položek z kolekce. Seznamy se podobají rozevíracím seznamům s tím rozdílem, že jsou pole seznamu vždy otevřená – pro seznam není žádný kompaktní (ne rozbalený) stav. Položky v seznamu se dají posunout, pokud není místo pro zobrazení všeho.

Je seznamové pole správným ovládacím prvkem?

Seznamový rámeček může být užitečný, pokud jsou položky v seznamu dostatečně důležité pro zvýrazněné zobrazení a je-li na obrazovce dostatek místa, aby se zobrazil celý seznam.
Seznam by měl upoutat pozornost uživatele na úplnou sadu alternativ v důležité volbě. Naproti tomu rozevírací seznam zpočátku upozorní uživatele na vybranou položku.
Nepoužívejte seznam, pokud:
- Seznam obsahuje velmi malý počet položek. Seznam s jedním výběrem, který má vždy stejné 2 možnosti, může být lépe prezentován jako radiová tlačítka. Zvažte také použití přepínačů, pokud jsou v seznamu 3 nebo 4 statické položky.
- Seznam je pro výběr jedné možnosti a vždy má stejné 2 možnosti, kde jeden může být chápán jako ne ten druhý, například "zapnuto" a "vypnuto". Použijte jedno zaškrtávací políčko nebo přepínač.
- Existuje velmi velký počet položek. Lepší volbou pro dlouhé seznamy je zobrazení mřížky a zobrazení seznamu. U velmi dlouhých seznamů seskupených dat je preferováno sémantické přiblížení.
- Položky jsou souvislé číselné hodnoty. V takovém případě zvažte použití posuvníku .
- Položky výběru mají v toku vaší aplikace sekundární důležitost nebo se ve většině situací doporučuje výchozí možnost. Místo toho použijte rozevírací seznam.

Doporučení pro seznamy

Ideální rozsah položek v seznamu je 3 až 9.
Seznam funguje dobře, když se jeho položky můžou dynamicky lišit.
Pokud je to možné, nastavte velikost seznamového pole tak, aby jeho seznam položek nemusel posouvat vodorovně ani rolovat.
Ověřte, že je jasný účel seznamu a které položky jsou aktuálně vybrané.
Zarezervujte vizuální efekty a animace pro dotykové ovládání a pro vybraný stav položek.
Omezte textový obsah položky seznamu na jeden řádek. Pokud jsou položky vizuály, můžete přizpůsobit velikost. Pokud položka obsahuje více řádků textu nebo obrázků, použijte místo toho zobrazení mřížky nebo zobrazení seznamu.
Výchozí písmo použijte, pokud pokyny pro vaši značku nenaznačují použití jiného písma.
Nepoužívejte seznam k provádění příkazů nebo dynamickému zobrazení nebo skrytí jiných ovládacích prvků.

Vytvořit kombinované pole

důležitá rozhraní API: třída ComboBox, vlastnost IsEditable, vlastnost Text, událost TextSubmitteda třída ListBox

Otevřete aplikaci Galerie WinUI 3 a podívejte se na ComboBox v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Kombinované pole naplníte přidáním objektů přímo do kolekce Items nebo vazbou vlastnosti ItemsSource na zdroj dat. Položky přidané do ComboBoxu jsou zabalené v kontejnerech ComboBoxItem.

Tady je jednoduché kombinované pole s položkami přidanými v 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>

Následující příklad ukazuje připojení komboboxu ke kolekci objektů 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"));
};

Výběr položky

Podobně jako ListView a GridView, ComboBox je odvozen od Selector, takže můžete získat výběr uživatele stejným standardním způsobem.

Vybranou položku kombinovaného pole můžete dostat nebo nastavit pomocí vlastnosti SelectedItem a dostat nebo nastavit index vybrané položky pomocí vlastnosti SelectedIndex.

Chcete-li získat hodnotu konkrétní vlastnosti u vybrané datové položky, můžete použít SelectedValue vlastnost. V tomto případě nastavte SelectedValuePath tak, aby určíte, z které vlastnosti na vybrané položce chcete získat hodnotu.

Návod

Pokud nastavíte SelectedItem nebo SelectedIndex pro označení výchozího výběru, dojde k výjimce, pokud je tato vlastnost nastavena před naplněním kolekce položek v rozevíracím seznamu. Pokud nedefinujete položky v XAML, je nejlepší zpracovat pole se seznamem Načtená událost a nastavit SelectedItem nebo SelectedIndex v obslužné rutině načtené události.

K těmto vlastnostem můžete vytvořit vazbu v jazyce XAML nebo zpracovat událost SelectionChanged a reagovat na změny výběru.

V kódu obslužné rutiny události můžete získat vybranou položku z vlastnosti SelectionChangedEventArgs.AddedItems. Dříve vybranou položku (pokud existuje) můžete získat z vlastnosti SelectionChangedEventArgs.RemovedItems. Kolekce AddedItems a RemovedItems obsahují pouze 1 položku, protože kombinované pole nepodporuje více výběr.

V tomto příkladu se dozvíte, jak zpracovat událost SelectionChanged a jak vytvořit vazbu na vybranou položku.

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

Ve výchozím nastavení dojde k události SelectionChanged, když uživatel klikne, klepne nebo stiskne klávesu Enter na položku v seznamu, aby potvrdil výběr, a kombinovaný seznam se zavře. Výběr se nezmění, když uživatel naviguje otevřený seznam pomocí kláves se šipkami.

Chcete-li vytvořit pole se seznamem, které se živě aktualizuje, když uživatel prochází otevřený seznam pomocí kláves se šipkami (například rozevírací seznam pro výběr písma), nastavte SelectionChangedTrigger na Always. To způsobí, že se událost SelectionChanged objeví, když se fokus změní na jinou položku v otevřeném seznamu.

Hledání textu

Kombinované pole automaticky podporují vyhledávání v jejich kolekcích. Když uživatelé píší znaky na fyzické klávesnici při soustředění se na otevřené nebo zavřené kombinované pole, zobrazí se kandidáti, kteří odpovídají uživatelovu řetězci. Tato funkce je užitečná hlavně při procházení dlouhého seznamu. Například při interakci s rozevíracím seznamem obsahujícím seznam stavů můžou uživatelé stisknout klávesu w, aby se "Washington" zobrazil pro rychlý výběr. Vyhledávání textu není citlivé na velikost písmen.

Můžete zakázat tuto funkci nastavením vlastnosti IsTextSearchEnabled na false.

Upravitelné kombinované pole

Pole se seznamem ve výchozím nastavení umožňuje uživateli vybrat z předem definovaného seznamu možností. Existují však případy, kdy seznam obsahuje pouze podmnožinu platných hodnot a uživatel by měl být schopen zadat další hodnoty, které nejsou uvedené. Chcete-li to umožnit, můžete pole se seznamem nastavit jako editovatelné.

Chcete-li upravit kombinované pole, nastavte vlastnost IsEditable na true. Potom zpracujte událost TextSubmitted, aby fungovala s hodnotou zadaná uživatelem.

Ve výchozím nastavení se hodnota SelectedItem aktualizuje, když uživatel potvrdí vlastní text. Toto chování můžete přepsat nastavením Handled na true v argumentech události TextSubmitted. Když je událost označena jako zpracovaná, pole se seznamem neprovede po události žádnou další akci a zůstane v režimu úprav. SelectedItem se neaktualizuje.

Tento příklad ukazuje snadno upravitelné pole se seznamem. Seznam obsahuje jednoduché řetězce a libovolná hodnota zadaná uživatelem se použije jako zadaná.

Výběr „nedávno použitých názvů“ umožňuje uživateli zadat vlastní texty. Seznam RecentlyUsedNames obsahuje některé hodnoty, ze které si uživatel může vybrat, ale uživatel může také přidat novou vlastní hodnotu. Vlastnost CurrentName představuje aktuálně zadaný název.

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

Text odeslaný

Můžete zpracovat událost TextSubmitted, abyste pracovali s hodnotou zadanou uživatelem. V obslužné rutině události obvykle ověříte, že hodnota zadaná uživatelem je platná, a pak použijete hodnotu ve vaší aplikaci. V závislosti na situaci můžete také přidat hodnotu do seznamu možností v rozevíracím seznamu pro budoucí použití.

Událost TextSubmitted nastane, pokud jsou splněny tyto podmínky:

Vlastnost IsEditable je true
Uživatel zadá text, který neodpovídá žádné existující položce v seznamu komba.
Uživatel stiskne Enter nebo přesune fokus z rozbalovacího pole.

K události TextSubmitted nedojde, pokud uživatel zadá text a pak přejde nahoru nebo dolů v seznamu.

Příklad – Ověření vstupu a použití na místě

V tomto příkladu výběr velikosti písma obsahuje sadu hodnot odpovídající rampě velikosti písma, ale uživatel může zadat velikosti písma, které nejsou v seznamu.

Když uživatel přidá hodnotu, která není v seznamu, velikost písma se aktualizuje, ale hodnota se nepřidá do seznamu velikostí písem.

Pokud nově zadaná hodnota není platná, použijte SelectedValue k vrácení vlastnosti Text na poslední známou dobrou hodnotu.

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

Ukázka – Ověření vstupu a přidání do seznamu

V tomto případě obsahuje "oblíbený výběr barev" nejběžnější oblíbené barvy (červená, modrá, zelená, oranžová), ale uživatel může zadat oblíbenou barvu, která není v seznamu. Když uživatel přidá platnou barvu (například Pink), nově zadaná barva se přidá do seznamu a nastaví se jako aktivní "oblíbená barva".

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

ovládací prvky textu
Pokyny pro kontrolu pravopisu
Třída TextBox
Třída PasswordBox
vlastnost délky řetězce String.Length

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-03-05