XAML TabControl

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.
  • 3606

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.

 TabControlImg1.gif

Figure 1. Tab Control using XAML

If you click on Rectangle Tab, you see Figure 2.

 TabControlImg2.gif

Figure 2. Rectangle tab output

If you click on Polygon tab, you see Figure 3.

 TabControlImg3.gif

Figure 3. Polygon tab output

Summary

In this article, I discussed how to create and use XAML Tab Control and Tab Items.

Further Readings
 
You may also want to read these related articles.
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

© 2020 DotNetHeaven. All rights reserved.