WPF C# TabControl example

Hi guys,

 

The WPF TabControl example below has a few interesting functionalities.  My original tabcontrol has 5 tabs and a hug amount of customizable controls such as buttons and dropdown menus etc. For simplicity reasons, I removed all the controls but 1 label and 1 textblock per tab, and I also present just two tabs.

Lets start with the XAML part of the tabcontrol.

All the XAML code presented below, will create the following layout:

XAML creates
XAML creates

I don’t know about you, but I really like reusable code; that’s why I added my tabcontrol in App.xaml file.

App.xaml
App.xaml

How you can use the tab control is shown below:

Initialise the tabcontrol:

TabControl
TabControl

Add the first Tab Item. In our case the General tab:

Tab item 1
Tab item 1

Add the second Tab Item. In our case the Data tab:

Tab Item 2
Tab Item 2

The most important function of this tabcontrol is the SelectionChanged event. Without it, if you navigate to tab item 2 when you have written something in any control on tab 1, that control will lose it’s value; for example if the control is a textblock, it will go empty.
Basically in your xaml.cs file you need to alter the event accordingly to your needs :

private void myTab_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// do something with the data.

Console.WriteLine(“My Data do not dissapear the same! “);
}

That’s all 😀

Leave a Reply

Your email address will not be published. Required fields are marked *