WPF Tab Control

Continuing the series on visual grouping controls in WPF, the Tab control is a common UI element that has been around for some time. It makes a convenient way to organize your window when there is more than could realistically fit and still be comprehensible.

In WPF, Tabs are very easy to implement. Create a new WPF Window, remove the default Grid tags, and add the following XAML:  


    <TabItem Header=Tab 1>Here’s Tab 1</TabItem>

    <TabItem Header=2nd Tab>A second Tab</TabItem>


Run the app, and you’ll see the two tabs on a window:


The TabItem, just like most controls, can hold a container control that can hold much more, thus making the tab really useful. In this example, let’s add a third tab item, with a grid. We’ll put in a few text boxes and a button.

  <TabControl Name=tabMyTabs >

    <TabItem Header=Tab 1>Here’s Tab 1</TabItem>

    <TabItem Header=2nd Tab>A second Tab</TabItem>

    <TabItem Header=Cool Tab>








          <ColumnDefinition Width=*></ColumnDefinition>

          <ColumnDefinition Width=2*></ColumnDefinition>


        <Label Grid.Column=0 Grid.Row=0


          First Name:


        <Label Grid.Column=0 Grid.Row=1


          Last Name:


        <TextBox Name=FirstName


                Grid.Row=0 />

        <TextBox Name=LastName


                Grid.Row=1 />

        <Button  Grid.Column=1


                Height=23 Width=75










Using techniques already described in my post on Grids (http://arcanecode.wordpress.com/2007/08/28/grid-yourself-its-wpf/ , in case you missed it) I was able to create a tab with some useful content. Running it, you can see the results for yourself:


It’s also possible to determine the current tab via code. Let’s wire up a click event to that OK button you see. This requires we name the tab (I called it tabMyTabs), and the button, and add a Click=”CoolTabButton_Click” to the button declaration. Now all we have to do is add a little code:

    private void CoolTabButton_Click(object sender, RoutedEventArgs e)


      TabItem ti = tabMyTabs.SelectedItem as TabItem;

      MessageBox.Show(“Tab Index=” + ti.Header);



Running and clicking on the OK button will result in a message box with the words “Tab Index=Cool Tab”

Granted my design won’t win any awards, but it gives you the general idea of how to use a tab control in WPF.

4 Responses to “WPF Tab Control”

  1. Anil Says:


    This post was really helpful for me.

    I have one more problem with tab control:

    I have two tabs. On click of button on one tab(button is on first tab), another tab should be selected.

    How can i achieve this.

    Pls help.


  2. Anil Says:


    Can I navigate content of WPF window in another window’s tabitem just like we can navigate page content to frame in tabitem.


  3. Bilal Haider Says:

    Nice Article.
    Could you please play with the events and how we can achieve form input output.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 122 other followers

%d bloggers like this: