Jelölőnégyzetek

A műveletelemek kijelöléséhez vagy kijelölésének megszüntetéséhez jelölőnégyzetet használunk. Használható egyetlen elemhez vagy több elem listájához, amelyek közül a felhasználó választhat. A vezérlőelem három kijelölési állapottal rendelkezik: kijelöletlen, kijelölt és meghatározatlan. A határozatlan állapotot akkor használja, ha egy alválasztási gyűjtemény nem jelölt és kijelölt állapotot is használ.

Példa a jelölőnégyzet állapotára

Ez a megfelelő vezérlő?

Használjon egyetlen jelölőnégyzetet bináris igen/nem választáshoz, például "Emlékezz rám?" bejelentkezési forgatókönyvvel vagy szolgáltatási szerződéssel.

Egyéni választáshoz használt egyetlen jelölőnégyzet

Bináris választás esetén a fő különbség a jelölőnégyzet és a kapcsoló között az, hogy a jelölőnégyzet az állapot jelzésére szolgál, míg a kapcsoló a műveletekhez lett tervezve. Késleltetheti a jelölőnégyzet-interakciók véglegesítését (például egy űrlap elküldésének részeként), miközben azonnal véglegesítenie kell egy kapcsolókapcsoló-interakciót. Emellett csak a jelölőnégyzetek engedélyezik a többszörös kijelölést.

Használjon több jelölőnégyzetet olyan helyzetekben, amikor a felhasználó olyan elemek közül választ egyet vagy többet, amelyek egy olyan választási csoport részei, ahol az elemek nem zárják ki egymást.

Jelölje be a jelölőnégyzetek csoportját, ha a felhasználók tetszőleges kombinációt választhatnak.

Több beállítás kijelölése jelölőnégyzetekkel

Ha a beállítások csoportosíthatók, meghatározatlan jelölőnégyzettel jelölheti az egész csoportot. Használja a jelölőnégyzet meghatározatlan állapotát, ha egy felhasználó kijelöli a csoport néhány, de nem az összes alelemet.

Vegyes választási lehetőségek megjelenítésére szolgáló jelölőnégyzetek

jelölőnégyzet és választógomb vezérlők segítségével a felhasználó választhat a lehetőségek listájából. A jelölőnégyzetek lehetővé teszik a felhasználó számára a beállítások kombinációjának kiválasztását. Ezzel szemben a rádiógombok lehetővé teszik, hogy a felhasználó a kölcsönösen kizáró lehetőségek közül egyetlen lehetőséget válasszon. Ha több lehetőség is van, de csak egy választható, használjon inkább egy választógombot.

Recommendations

Ellenőrizze, hogy a jelölőnégyzet célja és aktuális állapota egyértelmű-e.
A jelölőnégyzet szövegtartalma legfeljebb két sorra korlátozható.
Word a jelölőnégyzet címkéjét olyan utasításként, amely szerint a pipa igaz, a pipa hiánya pedig hamis.
Használja az alapértelmezett betűtípust, hacsak a márka irányelvei nem közlik, hogy használjon másikat.
Ha a szöveges tartalom dinamikus, gondolja át, hogyan méreteződik át a vezérlő, és mi fog történni a körülötte lévő vizualizációkkal.
Ha két vagy több egymást kölcsönösen kizáró lehetőség közül választhat, fontolja meg választógombokhasználatát.
Ne helyezzen két jelölőnégyzetcsoportot egymás mellé. Használjon csoportcímkéket a csoportok elkülönítéséhez.
Ne használjon be- és kikapcsolási vezérlőként jelölőnégyzetet, és ne végezzen parancsot; ehelyett használjon egy kapcsolót.
Ne használjon jelölőnégyzetet más vezérlők, például párbeszédpanelek megjelenítéséhez.
A határozatlan állapottal jelezheti, hogy egy beállítás be van kapcsolva néhány, de nem az összes részlehetőségekhez.
Határozatlan állapot használata esetén az alárendelt jelölőnégyzetekkel megjelenítheti, hogy mely beállítások vannak kiválasztva, és melyek nem. Úgy tervezheti meg a felhasználói felületet, hogy a felhasználó láthassa az allehetőségeket.
Ne használja a határozatlan állapotot harmadik állapot megjelenítéséhez. A meghatározatlan állapot azt jelzi, hogy egy beállítás be van állítva néhány, de nem az összes allehetőséghez. Ezért ne engedélyezze a felhasználóknak, hogy meghatározhatatlan állapotot állítsanak be közvetlenül. Példa arra, hogy mit nem kell csinálni: ez a jelölőnégyzet a meghatározhatatlan állapotot használja a közepes csípősség jelzésére.

Ehelyett használjon három lehetőséget tartalmazó választógombcsoportot.

Jelölőnégyzet létrehozása

Fontos API-k: Jelölőnégyzet osztály, Ellenőrzött esemény, IsChecked tulajdonság, Tartalom tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a jelölőnégyzetet működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Egyszerű jelölőnégyzet létrehozása

Ha címkét szeretne hozzárendelni a jelölőnégyzethez, állítsa be a Content tulajdonságot. A felirat a jelölőnégyzet mellett jelenik meg.

Ez az XAML egyetlen jelölőnégyzetet hoz létre, amellyel elfogadhatja a szolgáltatási feltételeket az űrlap elküldése előtt.

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

Itt ugyanaz a jelölőnégyzet van létrehozva a kódban.

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

Kötés az IsCheckedhez

A IsChecked tulajdonság segítségével állapítsa meg, hogy a jelölőnégyzet be van-e jelölve vagy törölve. Az IsChecked tulajdonság értékét egy másik bináris értékhez kötheti. Mivel azonban az IsChecked egy null értékű logikai érték, a logikai tulajdonsághoz való kötéshez egy öntött vagy egy értékkonvertert kell használnia. Ez a ténylegesen használt kötéstípustól függ, és az egyes lehetséges típusokra alább talál példákat.

Ebben a példában a jelölőnégyzet IsChecked tulajdonsága, amely a szolgáltatási feltételek elfogadását jelzi, a Küldés gomb IsEnabled tulajdonságához van kötve. A Küldés gomb csak akkor engedélyezett, ha a szolgáltatási feltételek megegyeznek.

Az x:Bind használata

Megjegyzés:

Itt csak a megfelelő kódot jelenítjük meg. További információ az adatkötésről: Adatkötés áttekintése. Az egyes {x:Bind} információk (például a típuskonverzió) részletesen le vannak írva a {x:Bind} jelöléskiterjesztésben.

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

Ha a jelölőnégyzet lehet meghatározhatatlan állapotban is, a kötés FallbackValue tulajdonságával adjuk meg a logikai értéket, amely ezt az állapotot jelképezi. Ebben az esetben nem szeretnénk, hogy a Küldés gomb is engedélyezve legyen:

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

x:Bind vagy Binding használata

Megjegyzés:

Itt csak a megfelelő kódot jelenítjük meg a(z) {x:Bind} használatával. A {Binding} példában a {x:Bind} helyére {Binding} kerül. Az adatkötéssel, az értékkonverterekkel és a {x:Bind} és a {Binding} korrektúrabővítmények közötti különbségekkel kapcsolatos további információkért lásd adatkötés áttekintését.

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

Kattintási és bejelölési események kezelése

Amikor a jelölőnégyzet állapota megváltozik, az Kattintás eseményt, vagy a Bejelölt és Nem bejelölt eseményeket kezelheti.

A Click esemény akkor következik be, amikor a kiválasztott állapot megváltozik. Ha kezeli a Kattintás eseményt, a jelölőnégyzet állapotának meghatározásához használja a IsChecked tulajdonságot.

A Jelölt és Jelöletlen események egymástól függetlenül történnek. Ha ezeket az eseményeket kezeli, mindkét eseményt kezelnie kell, hogy reagáljon az állapotváltozásokra a jelölőnégyzetben.

Az alábbi példákban a Kattintás esemény, valamint a Bejelölt és a Nem bejelölt események kezelését mutatjuk be.

Több jelölőnégyzet is használhatja ugyanazt az eseménykezelőt. Ez a példa négy jelölőnégyzetet hoz létre a pizza feltétek kiválasztásához. A négy jelölőnégyzet ugyanazzal a Kattintson eseménykezelőre a kijelölt feltöltések listájának frissítéséhez.

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

Itt található a Click esemény eseménykezelője. Minden alkalommal, amikor egy jelölőnégyzetre kattint, megvizsgálja a jelölőnégyzeteket, hogy lássa, melyek vannak bejelölve, és frissíti a kijelölt feltétek listáját.

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

Határozatlan állapot használata

A jelölőnégyzet vezérlőelem a ToggleButton osztályból örököl, és három állapota lehet.

Állam	Ingatlan	Érték
ellenőrizve	Be van jelölve	igaz
ellenőrizetlen	Be van jelölve	téves
határozatlan	Be van jelölve	nulla

Ahhoz, hogy a jelölőnégyzet jelentse a meghatározatlan állapotot, az IsThreeState tulajdonságot igazértékre kell állítania.

Az alábbi példában a "Select all" (Az összes kijelölése) jelölőnégyzet IsThreeState tulajdonsága true. Az "Összes kijelölése" jelölőnégyzet be van jelölve, ha az összes gyermekelem be van jelölve, nincs bejelölve, ha az összes gyermekelem nincs bejelölve, egyéb esetben pedig nem meghatározott.

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

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-02-25