In this article, I discuss how to create and use an XAML Tab Control. I start this article explaining how to create a tab control and sets its properties followed by adding tab items. In the end if this article, I show a sample application that uses the tab control.
Creating a Tab Control
The <TabControl /> element represents a Tab Control in XAML. To create a Tab Control, you simply need to set the Height and Widht attributes of the element. The following code creates a Tab Control.
<TabControl Height="150" Width="200"/>
The <TabControl.Background /> element, which takes a brush as a parameter is used to set the backround color of the tab control. The following code sets the background color of the tab control to Green with transparency as .30.
<TabControl.Background>
<SolidColorBrush Color="Green" Opacity="0.30"/>
</TabControl.Background>
Adding Tab Items
The <TabItem /> element represents a tab item. The Header attribute of <TabItem /> represents the text of the header tab.
<TabItem Header="Circle">
</TabItem>
Now you can treat a Tab Item as your container of other controls. For example, the following code creates a StackPanel on the tab item and draws an ellipse on the panel.
<TabItem Header="Circle">
<StackPanel>
<Ellipse Height="100" Width="100" StrokeThickness="5" stroke="black" Fill="gold"/>
</StackPanel>
</TabItem>
Sample Application
The following code creates a Tab Control with three tab items - Circle, Rectangle, and Polygon. When you click on these tabs, you will see a circle, a rectangle, and a polygon respectively.
<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Canvas Background="HorizontalGradient pink green" >
<TabControl Height="150">
<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>
</Canvas>
</Window>
Listing 1. Creating and using a Tab Control
The code listed in Listing 1 generates Figure 1.
Figure 1. Tab Control using XAML
If you click on Rectangle Tab, you see Figure 2.
Figure 2. Rectangle tab output
If you click on Polygon tab, you see Figure 3.
Figure 3. Polygon tab output
Summary
In this article, I discussed how to create and use XAML Tab Control and Tab Items.