TabControl Overview

  • Article

A TabControl enables a developer to arrange visual content in a compacted and organized form. The real-world analog of the control might be a tabbed notebook in which visual content is displayed on discrete pages accessed by selecting the appropriate tab. This topic introduces the TabControl class and provides examples of how to use it in both Extensible Application Markup Language (XAML) and C#.

This topic contains the following sections.

  • TabControl
  • Creating TabControls
  • TabControl Styling
  • Related Topics

TabControl

A TabControl contains TabItem elements with headers (titles) that identify the content of the tab page. The TabControl is useful for minimizing screen space usage, while allowing an application to expose a large amount of data. The user navigates through the items by clicking on the tabs using the mouse or by using the keyboard.

Typical TabControl

Tab control

Creating TabControls

The following example shows how to create a TabControl in XAML and add a C# event handler. This application demonstrates how properties of the Control class can be changed.

<TabControl TabStripPlacement="Top" Margin="0, 0, 0, 10">
  <TabItem Name="tabIitemContent" Header="TabItem with Buttons">
    <StackPanel>
      <Button Content="_OK"/>
      <Button Content="_Cancel"/>
    </StackPanel>
  </TabItem>

  <TabItem Name="backgroundcolor" Header="Background">
    <TabItem.Content>Background property information goes here.</TabItem.Content>
  </TabItem>

  <TabItem Name="foregroundcolor" Header="Foreground">
    <TabItem.Content>Foreground property information goes here.</TabItem.Content>
  </TabItem>

  <TabItem Name="bordercolor" Header="BorderColor">
    <TabItem.Content>Border color property information goes here.</TabItem.Content>
  </TabItem>
</TabControl>

The following example shows how to generate a TabControl in C#.

tabcon = new System.Windows.Controls.TabControl();
ti1 = new TabItem();
ti1.Header = "Background";
tabcon.Items.Add(ti1);
ti2 = new TabItem();
ti2.Header = "Foreground";
tabcon.Items.Add(ti2);
ti3 = new TabItem();
ti3.Header = "FontFamily";
tabcon.Items.Add(ti3);

cv2.Children.Add(tabcon);

For the complete sample see TabControl Sample.

TabControl Styling

With control styling, you can dramatically change the appearance and behavior of TabControl elements without having to write a custom control. In addition to setting visual properties, you can also apply styles to individual parts of a control, change the behavior of parts of the control through properties, or add additional parts or change the layout of a control. The following examples demonstrate several ways to change tab controls.

The first code example defines a style called SimpleTabControl that is applied to a TabControl to change the location of the tab strip and the color of the background. A TabControl may be placed at the top, bottom, left, or right of a window. The following style assigns the tab strip placement to the top of a window.

<Style x:Key="SimpleTabControl" TargetType="{x:Type TabControl}">
  <Setter Property = "TabStripPlacement" Value = "Top"/>
  <Setter Property = "Foreground" Value= "Blue"/>
</Style>

This example styles the individual items of a TabControl. The SimpleTabItem style changes the background color and the font weight of the items.

<Style x:Key="SimpleTabItem" TargetType="{x:Type TabItem}">
  <Setter Property = "Background" Value = "Pink"/>
  <Setter Property = "FontWeight" Value = "Bold"/>
</Style>

The final sample styles the items of a TabControl, not the control itself. The Triggers style uses triggers that enable you to change the appearance of a TabItem in response to events that occur on the item. When you move the mouse over the items, the background and foreground colors change.

<Style x:Key="Triggers" TargetType="{x:Type TabItem}">
  <Style.Triggers>
    <Trigger Property="TabItem.IsMouseOver" Value="true">
      <Setter Property = "Foreground" Value="Green"/>
      <Setter Property = "Background" Value="Red"/>
    </Trigger>
  </Style.Triggers>
</Style>

For the complete sample see TabControl Styles Sample.

See Also

Tasks

How to: Position Tabs on a TabControl
How to: Create a TabControl

Other Resources

WPF Controls Gallery Sample