Tab Control in WPF
This article explains how to use a Tab Control in WPF. In WPF, we use the Tab Control to create a tabbed user interface. In each tab, we add sub-controls to a Grid. And each tab has a Header. By default in each Tab Control two tab items are present. If you want
to add more tab items then right-click on tab item header and add tab items to your Tab Control.
![Tab-control.jpg]()
This is the snapshot of the Tab Control.
Example
<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 preceding XAML Code there is a single tab item named tabItem1. As I said, 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 a Text block and a Button inside the wrap panel. I have used a click event on the 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 an image control. Inside a Grid you can add any child controls to the Grid. In the preceding Tab Control Snapshot, when you click on the January button the respective tab item will be added to the Tab Control. If the tab item January is already present in the Tab Control then again if the user clicks the January button then the January tab will be added to the Tab Control. This is the code behind of the Tab Control.
TabControl.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
namespace TabControlInWPF
{
public partial class MainWindow : Window
{
publicbool flag1;
publicbool flag2;
publicMainWindow()
{
InitializeComponent();
tabControl1.Visibility = Visibility.Collapsed;
}
private void January_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;
}
}
private void February_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;
}
}
private void Close1_Click(object sender, RoutedEventArgs e)
{
tabControl1.Items.Remove(tabItem1);
flag1 = true;
}
private void Close2_Click(object sender, RoutedEventArgs e)
{
tabControl1.Items.Remove(tabItem2);
flag2 = true;
}
}
}