Apr 25


WPF TabControl


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:



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.

Changing the headers

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:



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.)

TabControl Events

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;

No Comments

Add Comment