Sdílet prostřednictvím

Zaškrtávací políčka

Zaškrtávací políčko slouží k výběru nebo zrušení výběru položek akcí. Dá se použít pro jednu položku nebo pro seznam více položek, ze které si uživatel může vybrat. Ovládací prvek má tři stavy výběru: nevybrané, vybrané a neurčité. Pokud má kolekce dílčích voleb nevybraný i vybraný stav, použijte neurčitý stav.

Příklad stavů zaškrtávacích políček

Je to správná kontrola?

Pro binární volbu ano/ne použijte jedno zaškrtávací políčko , například se scénářem "Pamatovat si mě?" nebo s podmínkami smlouvy o poskytování služeb.

Jedno zaškrtávací políčko použité pro jednotlivou volbu

Hlavní rozdíl mezi zaškrtávacím políčkem a přepínačem binární volby spočívá v tom, že zaškrtávací políčko je pro stav a přepínač je určen pro akci. Potvrzení interakce zaškrtávacího políčka (například v rámci odeslání formuláře) můžete zpozdit, zatímco byste měli okamžitě potvrdit interakci přepínače. Zaškrtávací políčka také umožňují vícenásobný výběr.

Pro scénáře s vícenásobným výběrem, ve kterých uživatel zvolí jednu nebo více položek ze skupiny voleb, které se vzájemně nevylučují, použijte více zaškrtávacích políček .

Vytvořte skupinu zaškrtávacích políček, když uživatelé můžou vybrat libovolnou kombinaci možností.

Výběr více možností se zaškrtávacími políčky

Pokud je možné seskupit možnosti, můžete k reprezentaci celé skupiny použít neurčité zaškrtávací políčko. Pokud uživatel vybere některé, ale ne všechny dílčí položky ve skupině, použijte neurčitý stav zaškrtávacího políčka.

Zaškrtávací políčka použitá k zobrazení smíšené volby

Ovládací prvky zaškrtávacího políčka i přepínačů umožňují uživateli vybrat ze seznamu možností. Zaškrtávací políčka umožňují uživateli vybrat kombinaci možností. Přepínače naproti tomu umožňují uživateli vybrat si jednu volbu ze vzájemně se vylučujíných možností. Pokud existuje více než jedna možnost, ale můžete vybrat pouze jednu, použijte přepínač.

Recommendations

  • Ověřte, že účel a aktuální stav zaškrtávacího políčka jsou jasné.

  • Omezte textový obsah zaškrtávacího políčka na maximálně dva řádky.

  • Popište popisek zaškrtávacího políčka jako tvrzení, které zaškrtnutí činí pravdivým, a absence zaškrtnutí činí nepravdivým.

  • Použijte výchozí písmo, pokud vám pokyny pro značku neřeknou, abyste použili jiné písmo.

  • Pokud je textový obsah dynamický, zvažte, jak bude ovládací prvek měnit velikost a co se stane s vizuály kolem něj.

  • Pokud existují dvě nebo více vzájemně se vylučujících možností k výběru, zvažte použití rádiových tlačítek.

  • Nezadávejte dvě skupiny zaškrtávacích políček vedle sebe. K oddělení skupin použijte popisky skupin.

  • Nepoužívejte zaškrtávací políčko jako ovládací prvek zapnuto/vypnuto nebo pro provádění příkazů; místo toho použijte přepínač.

  • Nepoužívejte zaškrtávací políčko k zobrazení jiných ovládacích prvků, například dialogového okna.

  • Pomocí neurčitého stavu označte, že je pro některé, ale ne všechny dílčí volby nastavena možnost.

  • Pokud používáte nedeterminovat stav, pomocí podřízených zaškrtávacích políček zobrazte, které možnosti jsou zaškrtnuté a které nejsou. Navrhujte uživatelské rozhraní tak, aby uživatel mohl zobrazit dílčí volby.

  • Nepoužívejte neurčitý stav k reprezentaci třetího stavu. Neurčitý stav se používá k označení, že je možnost nastavená pro některé, ale ne všechny dílčí volby. Neumožňujte uživatelům nastavit neurčitý stav přímo. V příkladu toho, co nezbytně nedělat, toto zaškrtávací políčko používá nezárčný stav, aby označilo střední úroveň pikantnosti.

    Neurčité zaškrtávací políčko

    Místo toho použijte skupinu přepínačů, která má tři možnosti.

    Skupina přepínačů se třemi možnostmi: Nepálivý, Pikantní a Extra pálivý

Vytvoření zaškrtávacího políčka

  • důležitá rozhraní API: třídy CheckBox, Vlastnost IsChecked , vlastnost Content

Otevřete aplikaci Galerie WinUI 3 a podívejte se na zaškrtávací políčko v akci.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Vytvoření jednoduchého zaškrtávacího políčka

Chcete-li přiřadit popisek k zaškrtávacímu políčka, nastavte vlastnost Content . Popisek se zobrazí vedle zaškrtávacího políčka.

Tento KÓD XAML vytvoří jedno zaškrtávací políčko, které se používá k vyjádření souhlasu s podmínkami služby před odesláním formuláře.

<CheckBox x:Name="termsOfServiceCheckBox"
          Content="I agree to the terms of service."/>

Toto je stejné zaškrtávací políčko vytvořené v kódu.

CheckBox termsOfServiceCheckBox = new CheckBox();
termsOfServiceCheckBox.Content = "I agree to the terms of service.";

Vazba na IsChecked

Pomocí vlastnosti IsChecked určete, zda je zaškrtávací políčko zaškrtnuté nebo nezaškrtnuté. Hodnotu IsChecked vlastnosti můžete svázat s jinou binární hodnotou. Vzhledem k tomu, že IsChecked je nulovatelná logická hodnota, musíte buď použít přetypování, nebo převaděč hodnot ke svázání s logickou vlastností. To závisí na skutečném typu vazby, který používáte, a pro každý možný typ najdete příklady níže.

V tomto příkladu je vlastnost IsChecked u zaškrtávacího políčka pro souhlas s podmínkami služby vázána na vlastnost IsEnabled tlačítka Odeslat. Tlačítko Odeslat je povoleno pouze v případě, že jsou podmínky služby dohodnuty.

Použití x:Bind

Poznámka:

Tady zobrazíme jenom příslušný kód. Další informace o datových vazbách najdete v přehledu datových vazeb. Konkrétní informace {x:Bind} (například přetypování) jsou podrobně popsány v rozšíření syntaxe {x:Bind}.

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay}"/>
</StackPanel>

Pokud může být zaškrtávací políčko také v neurčitém stavu, použijeme vlastnost FallbackValue vazby k určení logické hodnoty představující tento stav. V tomto případě nechceme, aby bylo povolené i tlačítko Odeslat:

<Button Content="Submit"
        IsEnabled="{x:Bind (x:Boolean)termsOfServiceCheckBox.IsChecked, Mode=OneWay, FallbackValue=False}"/>

Použití x:Bind nebo vazby

Poznámka:

Tady zobrazujeme jenom relevantní kód pomocí {x:Bind}. V příkladu {Binding} bychom {x:Bind} nahradili {Binding}. Další informace o datových vazbách, převaděčích hodnot a rozdílech mezi rozšířeními značek {x:Bind} a {Binding} najdete v přehledu datových vazeb.

...
<Page.Resources>
    <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverter"/>
</Page.Resources>

...

<StackPanel Grid.Column="2" Margin="40">
    <CheckBox x:Name="termsOfServiceCheckBox" Content="I agree to the terms of service."/>
    <Button Content="Submit"
            IsEnabled="{x:Bind termsOfServiceCheckBox.IsChecked,
                        Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}"/>
</StackPanel>

public class NullableBooleanToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool?)
        {
            return (bool)value;
        }
        return false;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is bool)
            return (bool)value;
        return false;
    }
}

Zpracování událostí kliknutí a zaškrtnutí

Pokud chcete provést akci při změně stavu zaškrtávacího políčka, můžete zpracovat událost kliknutí nebo zaškrtnuté a nezaškrtnuté události.

Událost Click nastane vždy, když se změní stav kontroly. Pokud zpracováváte událost Click, pomocí vlastnosti IsChecked určete, v jakém stavu je zaškrtávací políčko.

Zaškrtnuté a nezaškrtnuté události probíhají nezávisle. Pokud tyto události zpracováváte, měli byste zpracovat oba tyto události, abyste mohli reagovat na změny stavu v zaškrtávacím políčku.

V následujících příkladech ukazujeme zpracování události Kliknutí a zaškrtnuté a nezaškrtnuté události.

Více zaškrtávacích políček může sdílet stejnou obslužnou rutinu události. Tento příklad vytvoří čtyři zaškrtávací políčka pro výběr přísad na pizzu. Čtyři zaškrtávací políčka sdílejí stejnou obslužnou rutinu události Click ke aktualizaci seznamu vybraných toppingů.

<StackPanel Margin="40">
    <TextBlock Text="Pizza Toppings"/>
    <CheckBox Content="Pepperoni" x:Name="pepperoniCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Beef" x:Name="beefCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Mushrooms" x:Name="mushroomsCheckbox"
              Click="toppingsCheckbox_Click"/>
    <CheckBox Content="Onions" x:Name="onionsCheckbox"
              Click="toppingsCheckbox_Click"/>

    <!-- Display the selected toppings. -->
    <TextBlock Text="Toppings selected:"/>
    <TextBlock x:Name="toppingsList"/>
</StackPanel>

Tady je obslužná rutina pro událost Click. Při každém kliknutí na zaškrtávací políčko zkontrolují, která z nich jsou zaškrtnutá, a aktualizují seznam vybraných příloh.

private void toppingsCheckbox_Click(object sender, RoutedEventArgs e)
{
    string selectedToppingsText = string.Empty;
    CheckBox[] checkboxes = new CheckBox[] { pepperoniCheckbox, beefCheckbox,
                                             mushroomsCheckbox, onionsCheckbox };
    foreach (CheckBox c in checkboxes)
    {
        if (c.IsChecked == true)
        {
            if (selectedToppingsText.Length > 1)
            {
                selectedToppingsText += ", ";
            }
            selectedToppingsText += c.Content;
        }
    }
    toppingsList.Text = selectedToppingsText;
}

Použití neurčitého stavu

Ovládací prvek CheckBox dědí z ToggleButton a může mít tři stavy:

Stát Vlastnictví Hodnota
zkontrolováno Zaškrtnuto true
nezaškrtnuto Zaškrtnuto falešný
neurčitý Zaškrtnuto nula

Chcete-li toto políčko hlásit neurčitý stav, je nutné nastavit IsThreeState vlastnost true.

Pokud je možné seskupit možnosti, můžete k reprezentaci celé skupiny použít neurčité zaškrtávací políčko. Pokud uživatel vybere některé, ale ne všechny dílčí položky ve skupině, použijte neurčitý stav zaškrtávacího políčka.

V následujícím příkladu má zaškrtávací políčko "Vybrat vše" jeho IsThreeState vlastnost nastavena na true. Zaškrtávací políčko Vybrat vše je zaškrtnuté, pokud jsou zaškrtnuté všechny podřízené prvky, nezaškrtnuté, pokud nejsou zaškrtnuté všechny podřízené prvky, a v opačném případě je neurčité.

<StackPanel>
    <CheckBox x:Name="OptionsAllCheckBox" Content="Select all" IsThreeState="True"
              Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked"
              Indeterminate="SelectAll_Indeterminate"/>
    <CheckBox x:Name="Option1CheckBox" Content="Option 1" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
    <CheckBox x:Name="Option2CheckBox" Content="Option 2" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" IsChecked="True"/>
    <CheckBox x:Name="Option3CheckBox" Content="Option 3" Margin="24,0,0,0"
              Checked="Option_Checked" Unchecked="Option_Unchecked" />
</StackPanel>

private void Option_Checked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void Option_Unchecked(object sender, RoutedEventArgs e)
{
    SetCheckedState();
}

private void SelectAll_Checked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = true;
}

private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
{
    Option1CheckBox.IsChecked = Option2CheckBox.IsChecked = Option3CheckBox.IsChecked = false;
}

private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
{
    // If the SelectAll box is checked (all options are selected),
    // clicking the box will change it to its indeterminate state.
    // Instead, we want to uncheck all the boxes,
    // so we do this programmatically. The indeterminate state should
    // only be set programmatically, not by the user.

    if (Option1CheckBox.IsChecked == true &&
        Option2CheckBox.IsChecked == true &&
        Option3CheckBox.IsChecked == true)
    {
        // This will cause SelectAll_Unchecked to be executed, so
        // we don't need to uncheck the other boxes here.
        OptionsAllCheckBox.IsChecked = false;
    }
}

private void SetCheckedState()
{
    // Controls are null the first time this is called, so we just
    // need to perform a null check on any one of the controls.
    if (Option1CheckBox != null)
    {
        if (Option1CheckBox.IsChecked == true &&
            Option2CheckBox.IsChecked == true &&
            Option3CheckBox.IsChecked == true)
        {
            OptionsAllCheckBox.IsChecked = true;
        }
        else if (Option1CheckBox.IsChecked == false &&
            Option2CheckBox.IsChecked == false &&
            Option3CheckBox.IsChecked == false)
        {
            OptionsAllCheckBox.IsChecked = false;
        }
        else
        {
            // Set third state (indeterminate) by setting IsChecked to null.
            OptionsAllCheckBox.IsChecked = null;
        }
    }
}

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Rozhraní API pro tento ovládací prvek existují v jmenném prostoru Windows.UI.Xaml.Controls.

K získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky doporučujeme použít nejnovější WinUI 2 . WinUI 2.2 nebo novější obsahuje novou šablonu pro tento ovládací prvek, který používá zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

  • Last updated on