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.


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