TabControl

Tabbed content switching with header strip and content area.

Overview

TabControl extends Selector and provides a tabbed interface for switching between multiple content views. Tab headers are rendered in a horizontal strip using box-drawing characters, with the active tab visually distinguished. The content area below the header strip displays the Content of the currently selected TabItem. Changing the selected tab updates the content area immediately.

Basic Example

<TabControl SelectedIndex="0">
  <TabItem Header="General">
    <StackPanel Orientation="Vertical">
      <TextBlock Text="General settings content" />
    </StackPanel>
  </TabItem>
  <TabItem Header="Display">
    <TextBlock Text="Display settings content" />
  </TabItem>
  <TabItem Header="About">
    <TextBlock Text="Version 1.0.0" />
  </TabItem>
</TabControl>

Properties

Property	Type	Default	Description
SelectedBackground	Color	Blue	Background color of the active tab header.
SelectedForeground	Color	White	Foreground color of the active tab header.
SelectedIndex	int	0	Zero-based index of the currently selected tab. Inherited from Selector.
SelectedItem	object	null	The currently selected TabItem. Inherited from Selector.

TabItem Properties

Property	Type	Default	Description
Header	object	null	The text or content displayed in the tab header strip.
Content	object	null	The content displayed in the body area when this tab is selected.

Creating Items

Inline TabItem Elements

<TabControl>
  <TabItem Header="Tab 1">
    <TextBlock Text="Content for tab 1" />
  </TabItem>
  <TabItem Header="Tab 2">
    <TextBlock Text="Content for tab 2" />
  </TabItem>
</TabControl>

TabItem with Complex Content

<TabControl SelectedIndex="0">
  <TabItem Header="Profile">
    <StackPanel Orientation="Vertical">
      <TextBlock Text="Name: Alice" />
      <TextBlock Text="Role: Admin" />
      <Button Text="Edit Profile" />
    </StackPanel>
  </TabItem>
  <TabItem Header="Settings">
    <StackPanel Orientation="Vertical">
      <CheckBox Content="Enable dark mode" />
      <CheckBox Content="Show notifications" IsChecked="True" />
    </StackPanel>
  </TabItem>
</TabControl>

Examples

Styled Tab Headers

<TabControl SelectedIndex="0"
            SelectedBackground="DarkMagenta"
            SelectedForeground="White">
  <TabItem Header="Home">
    <TextBlock Text="Welcome home" />
  </TabItem>
  <TabItem Header="Search">
    <TextBlock Text="Search results" />
  </TabItem>
  <TabItem Header="Help">
    <TextBlock Text="Help content" />
  </TabItem>
</TabControl>

Data-Bound Tab Selection

<TabControl SelectedIndex="{Binding ActiveTabIndex, Mode=TwoWay}">
  <TabItem Header="Input">
    <TextBlock Text="Enter your data here" />
  </TabItem>
  <TabItem Header="Output">
    <TextBlock Text="{Binding OutputText}" />
  </TabItem>
</TabControl>

Keyboard Shortcuts

Key	Action
Left Arrow	Switch to the previous tab.
Right Arrow	Switch to the next tab.
Home	Switch to the first tab.
End	Switch to the last tab.
Tab	Move focus into the tab content area or to the next control.

Key Concepts

TabControl extends Selector, inheriting SelectedIndex, SelectedItem, and SelectionChanged event.
Each child must be a TabItem with a Header (displayed in the tab strip) and Content (displayed in the body area).
Tab headers are rendered using box-drawing characters to create a visual tab strip appearance.
Only the content of the currently selected TabItem is rendered in the content area.
The SelectionChanged event fires when the active tab changes, allowing you to respond to tab switches.
Use Left/Right arrow keys to navigate between tabs when the tab strip has focus.