Kryssrutorna

En kryssruta används för att markera eller avmarkera åtgärdsobjekt. Den kan användas för ett enskilt objekt eller för en lista över flera objekt som en användare kan välja mellan. Kontrollen har tre markeringstillstånd: omarkerad, markerad och obestämd. Använd det obestämda tillståndet när en samling underval har både omarkerade och valda tillstånd.

Är det här rätt kontroll?

Använd en enda kryssruta för ett binärt ja/nej-val, till exempel med inloggningsscenariot "Kom ihåg mig?" eller med ett serviceavtal.

För ett binärt val är den största skillnaden mellan en kryssruta och en vippomkopplare att kryssrutan är för status och att vippomkopplaren är till för åtgärd. Du kan fördröja incheckningen av en kryssruteinteraktion (till exempel som en del av ett formulär som skickas), medan du omedelbart bör checka in en växelinteraktion. Dessutom tillåter endast kryssrutor flera val.

Använd flera kryssrutor för scenarier med flera val där en användare väljer ett eller flera objekt från en grupp med alternativ som inte är ömsesidigt uteslutande.

Skapa en grupp med kryssrutor när användare kan välja valfri kombination av alternativ.

När alternativ kan grupperas kan du använda en obestämd kryssruta för att representera hela gruppen. Använd kryssrutans obestämda tillstånd när en användare väljer vissa, men inte alla, underobjekt i gruppen.

Både kontrollerna för kryssrutan och radioknappen låter användaren välja från en lista med alternativ. Med kryssrutor kan användaren välja en kombination av alternativ. Alternativknappar låter däremot användaren göra ett enkelt val mellan ömsesidigt uteslutande alternativ. När det finns fler än ett alternativ men bara ett kan väljas, använd en radioknapp i stället.

Rekommendationer

• Kontrollera att kryssrutans syfte och aktuella tillstånd är tydliga.

• Begränsa textinnehållet i kryssrutan till högst två rader.

• Formulera kryssrutans etikett som ett påstående som blir sant med en bockmarkering och falskt utan en bockmarkering.

• Använd standardteckensnittet om inte varumärkesriktlinjerna säger att du ska använda ett annat.

• Om textinnehållet är dynamiskt bör du överväga hur kontrollen ska ändra storlek och vad som händer med visuella objekt runt den.

• Om det finns två eller flera ömsesidigt uteslutande alternativ att välja mellan kan du överväga att använda alternativknappar.

• Placera inte två kryssrutegrupper bredvid varandra. Använd gruppetiketter för att separera grupperna.

• Använd inte en kryssruta som en på/av-kontroll eller för att utföra ett kommando. använd i stället en växla.

• Använd inte en kryssruta för att visa andra kontroller, till exempel en dialogruta.

• Använd det obestämda tillståndet för att ange att ett alternativ har angetts för vissa, men inte alla, underval.

• När du använder obestämt tillstånd använder du underordnade kryssrutor för att visa vilka alternativ som är markerade och vilka som inte är det. Utforma användargränssnittet så att användaren kan se undervalen.

• Använd inte det obestämda tillståndet för att representera ett tredje tillstånd. Det obestämda tillståndet används för att indikera att ett alternativ har angetts för vissa, men inte alla, underval. Tillåt därför inte att användare ställer in ett obestämt tillstånd direkt. För ett exempel på vad du inte ska göra använder den här kryssrutan det obestämda tillståndet för att indikera medelspikitet:

  

  Använd i stället en radioknappgrupp som har tre alternativ.

  

Skapa en kryssruta

WinUI 3 Gallery-appen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store- eller hämta källkoden på GitHub-

Skapa en enkel kryssruta

Om du vill tilldela en etikett till kryssrutan anger du egenskapen Content. Etiketten visas bredvid kryssrutan.

Den här XAML-kryssrutan skapar en enda kryssruta som används för att godkänna användarvillkoren innan ett formulär kan skickas.

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

Här är samma kryssruta som skapats i kod.

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

Bind till IsChecked

Använd egenskapen IsChecked för att avgöra om kryssrutan är markerad eller avmarkerad. Du kan binda värdet för egenskapen IsChecked till ett annat binärt värde. Men eftersom IsChecked är ett nullbart booleskt värde måste du antingen använda en gjuten eller en värdekonverterare för att binda den till en boolesk egenskap. Detta beror på den faktiska bindningstyp som du använder och du hittar exempel nedan för varje möjlig typ.

I det här exemplet är egenskapen IsChecked för kryssrutan för att godkänna tjänstvillkoren bunden till egenskapen IsEnabled för knappen Skicka. Knappen Skicka aktiveras endast om villkoren för tjänsten godkänns.

Använda 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>

Om kryssrutan också kan vara i ett obestämt tillstånd, använder vi egenskapen FallbackValue för bindningen för att ange det booleska värdet som representerar detta tillstånd. I det här fallet vill vi inte ha knappen Skicka aktiverad:

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

Använda x:Bind eller Bindning

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

Hantera klick och kontrollerade händelser

Om du vill utföra en åtgärd när kryssrutans tillstånd ändras kan du antingen hantera händelsen Klick eller händelsen Markerad och händelsen Avmarkerad.

Händelsen Klick inträffar när det markerade tillståndet ändras. Om du hanterar händelsen Klicka använder du egenskapen IsChecked för att fastställa kryssrutans tillstånd.

De kontrollerade och Avmarkerade händelser inträffar oberoende av varandra. Om du hanterar dessa händelser bör du hantera båda händelserna för att svara på tillståndsändringar i kryssrutan.

I följande exempel visar vi hur du hanterar händelsen Klicka och de markerade och omarkerade händelserna.

Flera kryssrutor kan dela samma händelsehanterare. I det här exemplet skapas fyra kryssrutor för att välja pizzapålägg. De fyra kryssrutorna delar samma Klicka på händelsehanterare för att uppdatera listan över markerade toppningar.

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

Här är händelsehanteraren för händelsen Klicka. Varje gång en kryssruta klickas på undersöker systemet kryssrutorna för att se vilka som är markerade och uppdaterar listan över valda pålägg.

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

Använd det obestämda tillståndet

Kontrollen CheckBox ärver från ToggleButton och kan ha tre tillstånd:

Om kryssrutan ska rapportera det obestämda tillståndet måste du ange egenskapen IsThreeState till true.

När alternativ kan grupperas kan du använda en obestämd kryssruta för att representera hela gruppen. Använd kryssrutans obestämda tillstånd när en användare väljer vissa, men inte alla, underobjekt i gruppen.

I följande exempel har kryssrutan "Markera alla" egenskapen IsThreeState inställd på true. Kryssrutan "Markera alla" är markerad om alla underordnade element är markerade, avmarkerad om alla underordnade element är avmarkerade och obestämd i annat fall.

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

UWP och WinUI 2

API:er för den här kontrollen finns i Windows.UI.Xaml.Controls namnområde.

Vi rekommenderar att du använder den senaste WinUI 2- för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. Mer information finns i hörnradie.

Relaterade artiklar

• CheckBox-klass
• Alternativknappar
• Växla växel