Zum Inhalt
Kuonen.UI

Expander und GroupBox

Zwei Container mit Kopf. Der Expander klappt seinen Inhalt auf und zu (Klick, Leertaste oder Eingabe auf dem Kopf; auch nach oben). Die GroupBox fasst zusammengehörende Felder unter einer Überschrift zusammen.

Vorführung: Expander und GroupBoxVorführung: Expander und GroupBox

KXAML

ExpanderSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.ExpanderVorfuehrung"
            Spacing="16">
  <Expander Width="300" Header="Details" Expanded="Details_Expanded" Collapsed="Details_Collapsed">
    <TextBlock Text="Hier stehen weitere Angaben." />
  </Expander>
  <Expander Width="300" Header="Klappt nach oben" ExpandDirection="Up" IsExpanded="True">
    <CheckBox Content="Protokoll schreiben" />
  </Expander>
  <GroupBox Width="300" Header="Grösse">
    <StackPanel Spacing="4">
      <RadioButton Content="Klein" GroupName="GruppenGroesse" IsChecked="False" />
      <RadioButton Content="Mittel" GroupName="GruppenGroesse" IsChecked="True" />
      <RadioButton Content="Gross" GroupName="GruppenGroesse" IsChecked="False" />
    </StackPanel>
  </GroupBox>
  <TextBlock x:Name="Meldung" Text="„Details“ ist zu." />
</StackPanel>
ExpanderSeite.kxaml.cs
using Kuonen.UI;
using Kuonen.UI.Ereignisse;

namespace Kuonen.UI.Galerie.Seiten;

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

/// <summary>KXAML-Fassung der Expander-Seite: der Baum steht in ExpanderSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class ExpanderVorfuehrung
{
    public ExpanderVorfuehrung() => InitializeComponent();

    private void Details_Expanded(object sender, RoutedEventArgs e) => Meldung.Text = "„Details“ ist auf.";

    private void Details_Collapsed(object sender, RoutedEventArgs e) => Meldung.Text = "„Details“ ist zu.";
}

C#

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

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: <see cref="Expander"/> und <see cref="GroupBox"/>.</summary>
public sealed partial class ExpanderSeite : GalerieSeite
{
    public override string Titel => "Expander und GroupBox";

    public override string Beschreibung =>
        "Zwei Container mit Kopf. Der Expander klappt seinen Inhalt auf und zu (Klick, Leertaste oder Eingabe auf dem Kopf; "
        + "auch nach oben). Die GroupBox fasst zusammengehörende Felder unter einer Überschrift zusammen.";

    public override string Stichworte => "Aufklapper Gruppe Kopf Header IsExpanded ExpandDirection HeaderedContentControl Gruppierung";

    public override string Datei => nameof(ExpanderSeite);

    public override UIElement Baue()
    {
        var meldung = new TextBlock { Text = "„Details“ ist zu." };
        var details = new Expander { Width = 300, Header = "Details", Content = new TextBlock { Text = "Hier stehen weitere Angaben." } };
        details.Expanded += (_, _) => meldung.Text = "„Details“ ist auf.";
        details.Collapsed += (_, _) => meldung.Text = "„Details“ ist zu.";

        var hoch = new Expander
        {
            Width = 300, Header = "Klappt nach oben", ExpandDirection = ExpandDirection.Up, IsExpanded = true,
            Content = new CheckBox { Content = "Protokoll schreiben" },
        };

        var groesse = new StackPanel { Spacing = 4 };
        foreach (var name in new[] { "Klein", "Mittel", "Gross" })
            groesse.Children.Add(new RadioButton { Content = name, GroupName = "GruppenGroesse", IsChecked = name == "Mittel" });
        var gruppe = new GroupBox { Width = 300, Header = "Grösse", Content = groesse };

        var seite = new StackPanel { Spacing = 16 };
        seite.Children.Add(details);
        seite.Children.Add(hoch);
        seite.Children.Add(gruppe);
        seite.Children.Add(meldung);
        return seite;
    }
}