Tab Control In WPF

In this article i am going to explain how to use tab control in WPF.In WPF, we use

the TabControl to create a tabbeduser interface. In eachtab, we add sub-controls to a Grid. And

each tab has a Header.By default in each Tab Controls two tab itemwill be present. If you want

to add more tab item then right click on tab item header and add tab items to your tab control.

This is the snap shot of the tab Control.

Example:

TabControl.Xaml

<TabControl Name="tabControl1"VerticalAlignment="Top" Width="375>

<TabItem Name="tabItem1" >

<TabItem.Header>

<WrapPanel Height="30" Width="63">

<TextBlock Text="January" />

<Button Content="X" Click="Close1_Click" />

</WrapPanel>

</TabItem.Header>

<Grid>

<Image Source="/jan.jpg" Name="image1" Width="364" />

</Grid>

</TabItem>

</TabControl>

In the above XAML Code there is a single tab item named tabItem1, as I told you can add any

number of tab items to your tab control.

Tab Item Header:

In the tab item header I have placed two child elements such as Text block and Button inside

the wrap panel ,I have used a click event on button to close the tab item.

Tab Item Body:

In the body of tab item I have placed a grid and added an image to the grid using image control.

Inside a Grid you can add any child controls to the Grid.

In the above tab control Snapshot . When you click on January button the respective tab Item

will get added to the tab control. If the tab item January is already present in the tab control,

again if the user click’s the January button then January tab will get added to the tab control.

This is the code behind of Tab control .

TabControl.cs

using System;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Text;

usingSystem.Windows;

usingSystem.Windows.Controls;

usingSystem.Windows.Data;

usingSystem.Windows.Documents;

usingSystem.Windows.Input;

namespaceTabControlInWPF

{

publicpartialclassMainWindow : Window

{

publicbool flag1;

publicbool flag2;

publicMainWindow()

{

InitializeComponent();

tabControl1.Visibility = Visibility.Collapsed;

}

privatevoidJanuary_Click(object sender, RoutedEventArgs e)

{

if (flag1 == true)

{

tabControl1.Items.Add(tabItem1);

flag1 = false;

tabItem1.Visibility = Visibility.Visible;

tabControl1.Visibility = Visibility.Visible;

}

else

{

tabControl1.SelectedItem = tabItem1;

tabControl1.Visibility = Visibility.Visible;

tabItem1.Visibility = Visibility.Visible;

}

}

privatevoidFebruary_Click(object sender, RoutedEventArgs e)

{

if (flag2 == true)

{

tabControl1.Items.Add(tabItem2);

flag2 = false;

tabControl1.Visibility = Visibility.Visible;

tabItem2.Visibility = Visibility.Visible;

}

else

{

tabControl1.SelectedItem = tabItem2;

tabControl1.Visibility = Visibility.Visible;

tabItem2.Visibility = Visibility.Visible;

}

}

privatevoid Close1_Click(object sender, RoutedEventArgs e)

{

tabControl1.Items.Remove(tabItem1);

flag1 = true;

}

privatevoid Close2_Click(object sender, RoutedEventArgs e)

{

tabControl1.Items.Remove(tabItem2);

flag2 = true;

}}}

Source Code :Download