Zum Inhalt
Kuonen.UI

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.

Vorführung: TabControlVorführung: TabControl

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