The WPF tabcontrol allows you to divide information to the user in a single screen. Each tab you configure have different set of controls and content that it's used to present or gather feedback from the application user.
Below you can a simple example in XAML on how to use the tab control with three tabs:
<window x:class="WpfApplication4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="525">
<grid>
<tabcontrol horizontalalignment="Left" height="313" margin="10,10,0,0" verticalalignment="Top" width="507">
<tabitem header="User Info">
<label content="Hello Tabs!"></label>
</tabitem>
<tabitem header="Member Of">
</tabitem>
<tabitem header="Account">
</tabitem>
</tabcontrol>
</grid>
</window>
In this sample, the tab control has three tabs defined. The tabs are declared using the TabItem mark up in XAML. This element has property called Header that we can use to name the tabs in the user interface. Inside the TabItem element we inject any content that we need. In this example, I'm creating a Label in the first tab, but you can add as many other elements as you need.
Because the headers can also have content, you can customize it with other element or control that you wish. In the sample below, we'll add some circles before the labels to give it some colors:
<window x:class="WpfApplication4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="MainWindow" height="350" width="525">
<grid>
<tabcontrol horizontalalignment="Left" height="313" margin="10,10,0,0" verticalalignment="Top" width="507">
<tabitem>
<tabitem.header>
<stackpanel orientation="Horizontal">
<ellipse width="10" height="10" fill="Red"></ellipse>
<textblock text="User"></textblock>
</stackpanel>
</tabitem.header>
<label content="Hello Tabs!"></label>
</tabitem>
<tabitem>
<tabitem.header>
<stackpanel orientation="Horizontal">
<ellipse width="10" height="10" fill="Blue"></ellipse>
<textblock text="Member Of"></textblock>
</stackpanel>
</tabitem.header>
</tabitem>
<tabitem>
<tabitem.header>
<stackpanel orientation="Horizontal">
<ellipse width="10" height="10" fill="Green"></ellipse>
<textblock text="Account"></textblock>
</stackpanel>
</tabitem.header>
</tabitem>
</tabcontrol>
</grid>
</window>
There's a lot mark up in this example, but we're just basically customizing the Header property by adding a TabItem.Header element and then adding a StackPanel inside it. We need the StackPanel to be able to add multiple elements inside the property. Then we add an Ellipse which will draw a circle next to our header text. The header text is defined by the TextBlock element. We can also style the TextBlock however we want (bold, italics, color, etc.)
Getting the selected can be done using the SelectedItem property and casting it into a TabItem. You can see an example below:
var tabItem =TabControl.SelectItem as TabItem;
var header = tabItem.Header;
