Zum Inhalt
Kuonen.UI

CheckBox

Ein Kontrollkästchen mit Beschriftung: an, aus und – mit IsThreeState – unbestimmt. Das Beispiel unten zeigt das übliche Muster „Alle auswählen“: das obere Kästchen ist unbestimmt, solange nur ein Teil angekreuzt ist.

Vorführung: CheckBoxVorführung: CheckBox

KXAML

CheckBoxSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.CheckBoxVorfuehrung"
            Spacing="16">
  <!-- Zustände. -->
  <StackPanel Orientation="Horizontal" Spacing="16">
    <CheckBox Content="Aus" />
    <CheckBox Content="An" IsChecked="True" />
    <CheckBox Content="Unbestimmt" IsThreeState="True" IsChecked="{x:Null}" />
    <CheckBox Content="Deaktiviert" IsChecked="True" IsEnabled="False" />
  </StackPanel>
  <!-- „Alle auswählen“: drei Kästchen und eines darüber, das ihren gemeinsamen Zustand zeigt und setzt. -->
  <StackPanel Spacing="6">
    <CheckBox x:Name="Alle" Content="Alle Zutaten" IsThreeState="True" Click="Alle_Click" />
    <CheckBox x:Name="Mehl" Content="Mehl" Margin="24,0,0,0" Click="Zutat_Click" />
    <CheckBox x:Name="Zucker" Content="Zucker" Margin="24,0,0,0" IsChecked="True" Click="Zutat_Click" />
    <CheckBox x:Name="Eier" Content="Eier" Margin="24,0,0,0" Click="Zutat_Click" />
  </StackPanel>
</StackPanel>
CheckBoxSeite.kxaml.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Ereignisse;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class CheckBoxSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new CheckBoxVorfuehrung();
}

/// <summary>KXAML-Fassung der CheckBox-Seite: der Baum steht in CheckBoxSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class CheckBoxVorfuehrung
{
    private readonly CheckBox[] _zutaten;

    public CheckBoxVorfuehrung()
    {
        InitializeComponent();
        _zutaten = [Mehl, Zucker, Eier];
        Zusammenfassen();
    }

    private void Zusammenfassen()
    {
        int an = 0;
        foreach (var z in _zutaten) if (z.IsChecked == true) an++;
        Alle.IsChecked = an == 0 ? false : an == _zutaten.Length ? true : null;
    }

    // Ein Klick auf das obere Kästchen: waren alle an, gehen alle aus, sonst alle an.
    private void Alle_Click(object sender, RoutedEventArgs e)
    {
        bool alleWarenAn = true;
        foreach (var z in _zutaten) alleWarenAn &= z.IsChecked == true;
        foreach (var z in _zutaten) z.IsChecked = !alleWarenAn;
        Zusammenfassen();
    }

    private void Zutat_Click(object sender, RoutedEventArgs e) => Zusammenfassen();
}

C#

CheckBoxSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="CheckBox"/>.</summary>
public sealed partial class CheckBoxSeite : GalerieSeite
{
    public override string Titel => "CheckBox";

    public override string Beschreibung =>
        "Ein Kontrollkästchen mit Beschriftung: an, aus und – mit IsThreeState – unbestimmt. Das Beispiel unten zeigt "
        + "das übliche Muster „Alle auswählen“: das obere Kästchen ist unbestimmt, solange nur ein Teil angekreuzt ist.";

    public override string Stichworte => "Kontrollkästchen Häkchen ankreuzen IsChecked IsThreeState unbestimmt alle auswählen";

    public override string Datei => nameof(CheckBoxSeite);

    public override UIElement Baue()
    {
        // Zustände.
        var zustaende = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 16 };
        zustaende.Children.Add(new CheckBox { Content = "Aus" });
        zustaende.Children.Add(new CheckBox { Content = "An", IsChecked = true });
        zustaende.Children.Add(new CheckBox { Content = "Unbestimmt", IsThreeState = true, IsChecked = null });
        zustaende.Children.Add(new CheckBox { Content = "Deaktiviert", IsChecked = true, IsEnabled = false });

        // „Alle auswählen“: drei Kästchen und eines darüber, das ihren gemeinsamen Zustand zeigt und setzt.
        var alle = new CheckBox { Content = "Alle Zutaten", IsThreeState = true };
        var zutaten = new[]
        {
            new CheckBox { Content = "Mehl", Margin = new Thickness(24, 0, 0, 0) },
            new CheckBox { Content = "Zucker", Margin = new Thickness(24, 0, 0, 0), IsChecked = true },
            new CheckBox { Content = "Eier", Margin = new Thickness(24, 0, 0, 0) },
        };
        void Zusammenfassen()
        {
            int an = 0;
            foreach (var z in zutaten) if (z.IsChecked == true) an++;
            alle.IsChecked = an == 0 ? false : an == zutaten.Length ? true : null;
        }
        alle.Click += (_, _) =>
        {
            // Ein Klick auf das obere Kästchen: waren alle an, gehen alle aus, sonst alle an.
            bool alleWarenAn = true;
            foreach (var z in zutaten) alleWarenAn &= z.IsChecked == true;
            foreach (var z in zutaten) z.IsChecked = !alleWarenAn;
            Zusammenfassen();
        };
        foreach (var z in zutaten) z.Click += (_, _) => Zusammenfassen();
        Zusammenfassen();

        var liste = new StackPanel { Spacing = 6 };
        liste.Children.Add(alle);
        foreach (var z in zutaten) liste.Children.Add(z);

        var seite = new StackPanel { Spacing = 16 };
        seite.Children.Add(zustaende);
        seite.Children.Add(liste);
        return seite;
    }
}