ARTICLE

Tab Control in WPF

Posted by Sapna Articles | WPF using VB.NET October 13, 2010
In this article you will see how to built tab control in WPF.
 
Reader Level:

You can easily build a tab control from the scratch with markup codes. There are two elements TabControl and TabItem which plays main roles in building a tab control. TabControl is the container of one or more TabItem elements.

Each TabControl can contain a collection of TabItem elements.  TabItem has two specific attributes. Header and IsSelected where Header is the string value that you see on top of each tab and IsSelected is a Boolean value that specifies if a tab is selected.  Apparently only one tab can be selected at a time. Below is an example of a TabControl with three TabItem.

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="UseTabControl" Height="300" Width="300">
    <Grid>
        <TabControl Name="TabControl1" SelectedIndex="0">
            <TabItem Name="tabName" Header="Name">
                <StackPanel Margin="20,20,0,0">
                    <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal">
                        <Label Height="25.96" Width="84">First Name</Label>
                        <TextBox Height="25" Width="147" />
                    </StackPanel>
                    <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal">
                        <TextBox Height="25" Width="147" />
                    </StackPanel>
                </StackPanel>
            </TabItem>
            <TabItem Name="tabAddress" Header="Address">
                <StackPanel Margin="20,20,0,0" >
                    <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal">
                        <Label Height="25.96" Width="84">Full Address</Label>
                        <TextBox Height="25" Width="147" />
                    </StackPanel>
                </StackPanel>
            </TabItem>
            <TabItem Name="tabPicture" Header="Picture">
                <Image Margin="50,66,67,50" Name="Image1" Source="c:\Image.jpeg" Stretch="Uniform" StretchDirection="DownOnly" />
        </TabControl>
    </Grid>
</Window>

OUTPUT

Result after click on Tab1

tabcontrol1.gif

Tab2

tabcontrol2.gif

Tab3

tabcontrol3.gif

CONCLUSION

I hope this will help you to understand TabControl in WPF Application.

Login to add your contents and source code to this article
share this article :
post comment
 
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor