How to Create Tabs using TabControl: WPF

When there is not much space on our screen then programmer uses a tab control. Tab control is used to organize multiple tabs on WPF window, which can performs individual function decided by the programmer. It can contains collection of objects of any type i.e. string, image or a container.

Through XAML, we can place a tab control easily using the element Tab Control. To place some tabs into tab control, we have to use TabItem elements. Write the following code in your XAML:

<TabControl Name="tabControl" Height="400" Width="300" Margin="5">
<TabItem Header="Tab 1" Width="70"></TabItem>
<TabItem Header="Tab 2" Width="70"></TabItem>
<TabItem Header="Tab 3" Width="70"></TabItem>
</TabControl>

Now run the code and check out the tab control. It have three tabs with their own header as described above.

The same tab control can also be generated through the following code in C# code behind file:

TabControl tabcontrol = new TabControl();
tabcontrol.Name = "tabControl";
tabcontrol.Height = 400;
tabcontrol.Width = 300;
tabcontrol.Margin = new Thickness(5);

TabItem tabItem1 = new TabItem();
tabItem1.Header = "Tab 1";
tabcontrol.Items.Add(tabItem1);

TabItem tabItem2 = new TabItem();
tabItem2.Header = "Tab 2";
tabcontrol.Items.Add(tabItem2);

TabItem tabItem3 = new TabItem();
tabItem3.Header = "Tab 2";
tabcontrol.Items.Add(tabItem3);

this.Content = tabcontrol;

In next article, we will place some items/containers in these tab items. The containers could have other items/containers.