TabControl
Registerkarten zeigen je einen Inhalt. Klick oder Pfeiltasten wählen den Reiter; Tab springt aus der Leiste in den Inhalt. Die Leiste liegt oben, unten, links oder rechts.


KXAML
TabControlSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
xmlns:x="https://ui.kuonen.org/kxaml/x"
x:Class="Kuonen.UI.Galerie.Seiten.TabControlVorfuehrung"
Spacing="12">
<!-- Lage der Leiste wählen. -->
<StackPanel Orientation="Horizontal" Spacing="12">
<RadioButton Content="Oben" GroupName="ReiterLage" IsChecked="True" Checked="Lage_Checked" />
<RadioButton Content="Unten" GroupName="ReiterLage" IsChecked="False" Checked="Lage_Checked" />
<RadioButton Content="Links" GroupName="ReiterLage" IsChecked="False" Checked="Lage_Checked" />
<RadioButton Content="Rechts" GroupName="ReiterLage" IsChecked="False" Checked="Lage_Checked" />
</StackPanel>
<!-- Die Reiter sind Kindelemente (Items); den ersten wählt das Code-Behind, wenn alle da sind. -->
<TabControl x:Name="Reiter" Width="320" Height="140">
<TabItem Header="Allgemein">
<TextBlock Text="Allgemeine Einstellungen." />
</TabItem>
<TabItem Header="Anzeige">
<CheckBox Content="Protokoll schreiben" />
</TabItem>
<TabItem Header="Gesperrt" IsEnabled="False">
<TextBlock Text="Nicht erreichbar." />
</TabItem>
<TabItem Header="Info">
<TextBlock Text="Kuonen.UI" />
</TabItem>
</TabControl>
<TextBlock x:Name="Meldung" Text="Reiter „Allgemein“." />
</StackPanel>TabControlSeite.kxaml.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Ereignisse;
namespace Kuonen.UI.Galerie.Seiten;
public sealed partial class TabControlSeite
{
protected override Func<UIElement>? KxamlFabrik => () => new TabControlVorfuehrung();
}
/// <summary>KXAML-Fassung der TabControl-Seite: der Baum steht in TabControlSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class TabControlVorfuehrung
{
public TabControlVorfuehrung()
{
InitializeComponent();
// Attribute setzt KXAML vor den Kindern; gewählt wird darum hier, wenn alle Reiter da sind.
Reiter.SelectedIndex = 0;
Reiter.SelectionChanged += (_, _) => Meldung.Text = Reiter.SelectedItem is TabItem t ? $"Reiter „{t.Header}“." : "Kein Reiter.";
}
private void Lage_Checked(object sender, RoutedEventArgs e) => Reiter.TabStripPlacement = (string?)((RadioButton)sender).Content switch
{
"Unten" => TabStripPlacement.Bottom,
"Links" => TabStripPlacement.Left,
"Rechts" => TabStripPlacement.Right,
_ => TabStripPlacement.Top,
};
}C#
TabControlSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;
namespace Kuonen.UI.Galerie.Seiten;
/// <summary>Galerie-Seite: <see cref="TabControl"/>.</summary>
public sealed partial class TabControlSeite : GalerieSeite
{
public override string Titel => "TabControl";
public override string Beschreibung =>
"Registerkarten zeigen je einen Inhalt. Klick oder Pfeiltasten wählen den Reiter; Tab springt aus der Leiste in den "
+ "Inhalt. Die Leiste liegt oben, unten, links oder rechts.";
public override string Stichworte => "Reiter Registerkarte TabItem TabStripPlacement SelectedContent Seiten";
public override string Datei => nameof(TabControlSeite);
public override UIElement Baue()
{
var meldung = new TextBlock { Text = "Reiter „Allgemein“." };
var reiter = new TabControl { Width = 320, Height = 140 };
reiter.Items.Add(new TabItem { Header = "Allgemein", Content = new TextBlock { Text = "Allgemeine Einstellungen." } });
reiter.Items.Add(new TabItem { Header = "Anzeige", Content = new CheckBox { Content = "Protokoll schreiben" } });
reiter.Items.Add(new TabItem { Header = "Gesperrt", Content = new TextBlock { Text = "Nicht erreichbar." }, IsEnabled = false });
reiter.Items.Add(new TabItem { Header = "Info", Content = new TextBlock { Text = "Kuonen.UI" } });
reiter.SelectedIndex = 0;
reiter.SelectionChanged += (_, _) => meldung.Text = reiter.SelectedItem is TabItem t ? $"Reiter „{t.Header}“." : "Kein Reiter.";
// Lage der Leiste wählen.
var lagen = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 12 };
foreach (var (name, lage) in new[]
{
("Oben", TabStripPlacement.Top), ("Unten", TabStripPlacement.Bottom), ("Links", TabStripPlacement.Left), ("Rechts", TabStripPlacement.Right),
})
{
var feld = new RadioButton { Content = name, GroupName = "ReiterLage", IsChecked = lage == TabStripPlacement.Top };
feld.Checked += (_, _) => reiter.TabStripPlacement = lage;
lagen.Children.Add(feld);
}
var seite = new StackPanel { Spacing = 12 };
seite.Children.Add(lagen);
seite.Children.Add(reiter);
seite.Children.Add(meldung);
return seite;
}
}