Using XAML TabControl in WPF

The XAML TablControl element represents a tab control. In this article, we will see how to use a TabControl in WPF.

A Tab Control has tab items and each tab item represents a container that is used to host other controls. A typical example of a Tab control is the Visual Studio designer as shown in Figure 1. If you click on the Window1.xaml tab item, you will see XAML code but if you click on Window1.xaml.cs, you will see C# code behind.


Figure 1

Create a Tab Control

The TabControl element in XAML represents a Tab Control.

<TabControl />

The code snippet in Listing 1 creates a Tab Control and sets it height, width, margin and alignment. The code also adds a TabItem.

<TabControl Height="238" HorizontalAlignment="Left" Margin="12,12,0,0"
            Name="tabControl1" VerticalAlignment="Top" Width="445">
    <TabItem Header="tabItem1" Name="tabItem1">
    </TabItem>
</TabControl>

Listing 1

The output of Listing 1 looks as in Figure 2.


Figure 2

Adding Tab Items

A Tab Control is nothing without a Tab Item. The <TabItem \> element in XAML represents a Tab Item. The Header property of a TabItem represents the header text of the header. The following code creates a TabItem with the header text “Circle”.

<TabItem Header="Circle">
</TabItem>

A tab item can host other XAML controls similar to a panel or grid control. For example, the following code adds a StackPanel to the tab item and on that StackPanel, it creates a circle with height and width 100.

<TabItem  Header="Circle">
   <StackPanel>
<Ellipse Height="100" Width="100" StrokeThickness="5" Stroke="black"
      Fill="gold"/>
   </StackPanel>
</TabItem >

Using the same preceding approach, I add three tab items to the tab control (Listing 2) called Circle, Rectangle and Polygon.

<TabControl Height="150" FontFamily="Verdana" FontSize="12" >
            <TabControl.Background>
                <SolidColorBrush Color="Green" Opacity="0.30"/>
            </TabControl.Background>
            <TabItem  Header="Circle">
                <StackPanel>
                    <Ellipse Height="100" Width="100" StrokeThickness="5" Stroke="black"
      Fill="gold"/>
                </StackPanel>
            </TabItem >
            <TabItem  Header="Rectangle">
                <StackPanel>
                    <Rectangle Fill="Yellow" Width="100" Height="100" Stroke="Blue" StrokeThickness="5">
                    </Rectangle>
                </StackPanel>
            </TabItem >
            <TabItem  Header="Polygon">
                <StackPanel>
                    <Polygon Points="100,50 50,100 150,100 100,50 100,30"
       Stroke="green" StrokeThickness="3" Fill="Yellow"/>
                </StackPanel>
            </TabItem >
</TabControl>

Listing 2

If I run the application, the Circle tab shows me a circle that looks as in Figure 3.


Figure 3

If I click on Rectangle and Polygon, the output looks as in Figure 4 and Figure 5 respectively.


Figure 4


Figure 5

Formatting Tab Items

Let's get a little creative. How about making our tab headers and tab control areas look nicer.

In a Tab Control, both a Tab Header and Tab Item are loosely coupled and we can treat them as any other WPF control. That said, we can place any children controls on them, format them and do whatever we want. So if we want to place a DataGrid control in a TabItem header, we can do that.

Now let's format our Tab Item Header and Tab Item container area. We will format our Tab Item that looks as in Figure 6, where we will use multiple colors for the background and change the text of the Tab Item Header and we will also change the background of the Tab Item container area to a gradient background.


Figure 6

To do this, I placed a StackPanel on TabItem.Header and set its background to a LinearGradientBrush. Then, I placed an Ellipse and a TextBlock on the TabItem Header.

Then as the content of the TabItem, I placed a StackPanel and changed its background to a LinearGradientBrush. See Listing 3.

<TabItem >
        <!-- Create Tab Header -->
        <TabItem.Header>
            <!-- Place a StackPanel on TabHeader so we can place multiple controls on it -->
            <StackPanel Orientation="Horizontal">
                <StackPanel.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Offset="0" Color="Orange"/>
                            <GradientStop Offset="0.25" Color="Purple"/>
                            <GradientStop Offset="0.5" Color="Violet"/>
                            <GradientStop Offset="0.75" Color="Green"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </StackPanel.Background>
                <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="2" Fill="Yellow"/>
                <TextBlock Text="Circle" Margin="1,1,1,1" VerticalAlignment="Center"
                           FontFamily="Georgia" FontSize="18" FontWeight="Bold" />
            </StackPanel>
        </TabItem.Header>

        <!-- Place a StackPanel on TabItem to place children controls -->
        <StackPanel>
            <StackPanel.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0" Color="Orange"/>
                        <GradientStop Offset="0.25" Color="Purple"/>
                        <GradientStop Offset="0.5" Color="Violet"/>
                        <GradientStop Offset="0.75" Color="Green"/>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </StackPanel.Background>
            <Ellipse Height="100" Width="100" StrokeThickness="5" Stroke="black" Fill="gold"/>
        </StackPanel>
    </TabItem >

Listing 3

Note: If you would like to load images at the top of text of the header, simply remove Orientation="Horizontal" from the stack panel in the preceding code. The default orientation is vertical.

Display Image as Tab Item Header

You may display an image in a Tab Item Header by placing an Image control as TabItem.Header as in the following.

<TabItem.Header>
    <Image Source="Flower.jpg" Width="50" />
</TabItem.Header>

The Tab Item Header with image looks as in Figure 7.


Figure 7

Position Tab Items

The TabStripPlacement property of a TabControl is used to position Tab Items. The value of TabStripPlacement can be Left, Top, Bottom and Right. The following code snippet sets the Tab Items position to bottom.

<TabControl Height="238" HorizontalAlignment="Left" Margin="12,12,0,0"
    Name="tabControl1" VerticalAlignment="Top" Width="445"
           SelectionChanged="tabControl1_SelectionChanged"
           TabStripPlacement="Bottom">

The TabControl with bottom positioned Tab Items looks as in Figure 8.


Figure 8

How to add a Context Menu to a Tab Control

TabItem.ContextMenu is used to add a ContextMenu to a TabItem. The following code snippet creates a TabControl where the first TabItem has a ContextMenu with three Menu items.

<TabControl>
    <TabItem Name="ColorTabItem" Header="Color Tab">
        <TabItem.ContextMenu>
            <ContextMenu MenuItem.Click="ContextMenuClickEventHandler">
                <MenuItem Header="Red" Name="RedMenuItem"/>
                <MenuItem Header="Blue" Name="BlueMenuItem"/>
                <MenuItem Header="Orange" Name="OrangeMenuItem"/>
            </ContextMenu>
        </TabItem.ContextMenu>
        <TabItem.Content>
            Tab Item data here
        </TabItem.Content>
    </TabItem>
    <TabItem Name="ShapeTabItem" Header="Shape Tab"></TabItem>
</TabControl>

Write this click event handler in your code behind.

void ContextMenuClickEventHandler(object sender, RoutedEventArgs e)
{
    if (e.Source == RedMenuItem )
    {
        ColorTabItem.Header = "Red Item";
        ColorTabItem.Foreground = Brushes.Red;
    }
    else if (e.Source == BlueMenuItem )
    {
        ColorTabItem.Header = "Blue Item";
        ColorTabItem.Foreground = Brushes.Blue;
    }
    else if (e.Source == OrangeMenuItem )
    {
        ColorTabItem.Header = "Orange Item";
        ColorTabItem.Foreground = Brushes.Orange;
    }
}

The output looks like this. Download the attached project for more details.



Summary

In this article, we saw how to create and use a TabControl in a WPF application. We also saw how to make a tab item header and its contents more interactive by simply adding a few lines of code to our XAML file.