The WPF Tab Control - Inside and Out

Skill

The WPF Tab Control - Inside and Out

Posted in:

When it comes to the WinForm's Tab Control, there was a lot left to be desired. If you had to make major changes to either looks or functionality, you were better off just writing your own tab control completely from scratch. The WPF Tab Control makes major strides in the right direction, and because of the power of WPF styles and control templates, you pretty much have complete control over how the tab control looks and feels. This tutorial is going to introduce you to the tab control and demonstrate how to re-skin it look like how you want.

Let's start off easy by simply putting a regular old tab control in a window and adding a couple of tabs.

<Window x:Class="TabControlTutorial.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Tabs" Height="281" Width="454">
  <Grid>
    <TabControl>
      <TabItem Header="Cheese">
        The Cheese Tab
      </TabItem>
      <TabItem Header="Pepperoni">
        The Pepperoni Tab
      </TabItem>
      <TabItem Header="Mushrooms">
        The Mushrooms Tab
      </TabItem>
    </TabControl>
  </Grid>
</Window>

The above code gives you a pretty standard looking tab control like the one pictured below.

Basic Tab Control

Like most other WPF controls, the contents of a TabItem can be most any other WPF control. Let's look at a tab with an image set as the content.

<Window x:Class="TabControlTutorial.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Tabs" Height="281" Width="454">
  <Grid>
    <TabControl>
      <TabItem Header="Cheese">
        The Cheese Tab
      </TabItem>
      <TabItem Header="Pepperoni">
        <Image Source="pepperoni.jpg" />
      </TabItem>
      <TabItem Header="Mushrooms">
        The Mushrooms Tab
      </TabItem>
    </TabControl>
  </Grid>
</Window>

That should look something like the following:

Pepperoni Tab Control

That's enough of the simple stuff. If all you want is a basic tab control with some content on each tab, the above code will do everything you need. Let's look at some more interesting stuff now. Just like the content of the TabItem, the Header property of the TabItem can also have other WPF controls. Let's put an image in each of the tabs.

<Window x:Class="TabControlTutorial.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Tabs" Height="281" Width="454">
  <Grid>
    <TabControl>
      <TabItem>
        <TabItem.Header>
          <StackPanel Orientation="Horizontal">
            <Image Height="18" Source="cheese.jpg" />
            <TextBlock Text="Cheese" Margin="2,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </TabItem.Header>
      </TabItem>
      <TabItem>
        <TabItem.Header>
          <StackPanel Orientation="Horizontal">
            <Image Height="18" Source="pepperoni.jpg" />
            <TextBlock Text="Pepperoni" Margin="2,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </TabItem.Header>
      </TabItem>
      <TabItem>
        <TabItem.Header>
          <StackPanel Orientation="Horizontal">
            <Image Height="18" Source="mushrooms.jpg" />
            <TextBlock Text="Mushrooms" Margin="2,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </TabItem.Header>
      </TabItem>
    </TabControl>
  </Grid>
</Window>

And that makes something that looks like the image below.

Tab Control With Images

With the techniques above, you should be able to do almost anything you need with a tab control. What you can't do, however, is change how the underlining tab control looks. Fortunately, WPF's style system makes modifying how the tab control looks fairly easy. By default, the color of the tabs themselves will follow the theme of the Windows machine they're running on. Let's start off by modifying the color and shape of the tabs.

The first thing we need to do is define a style for the TabItem control. Styles for WPF are similar to what CSS is for web pages, except much more powerful.

<Window x:Class="TabControlTutorial.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Tabs" Height="281" Width="454">
  <Window.Resources>
    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <Grid>
              <Border
                 Name="Border"
                 Background="LightBlue"
                 BorderBrush="Black"
                 BorderThickness="1,1,1,1"
                 CornerRadius="6,6,0,0" >
                <ContentPresenter x:Name="ContentSite"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   ContentSource="Header"
                   Margin="12,2,12,2"/>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
      <TabControl>
        <TabItem Header="Cheese" />
        <TabItem Header="Pepperoni" />
        <TabItem Header="Mushrooms" />
      </TabControl>
  </Grid>
</Window>

Styles are defined up in the resources for your control - in this case the Window that holds my tab control. There's a lot going on here, and most of it I stole from this MSDN article. Let's step through this tag-by-tag.

<Style TargetType="{x:Type TabItem}">

Here we are defining a style for a specific type of control - the TabItem. Any TabItem that appears in this window will use this style.

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type TabItem}">

This style is simply setting the Template property of the TabItem. The template can hold most types of WPF controls, so you can make it look pretty much like anything you want.

<Grid>
  <Border
     Name="Border"
     Background="LightBlue"
     BorderBrush="Black"
     BorderThickness="1,1,1,1"
     CornerRadius="6,6,0,0" >
    <ContentPresenter x:Name="ContentSite"
       VerticalAlignment="Center"
       HorizontalAlignment="Center"
       ContentSource="Header"
       Margin="12,2,12,2"/>
  </Border>
</Grid>

For this template, we simply put a grid and a border to give the tab a background color and some rounded corners. The ContentPresenter is there to display the content of our TabItem - in this case whatever you put in the Header. With this style applied to the Tab Control, our application now looks like the following:

Styled Tab Control

Not too bad, but you may have noticed that deselected tabs aren't distinguished from selected tabs. This is because when you override the style of a Tab Item, you're now responsible for everything. This is easily implemented with Triggers.

<Style TargetType="{x:Type TabItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
        <Grid>
          <Border
             Name="Border"
             Background="LightBlue"
             BorderBrush="Black"
             BorderThickness="1,1,1,1"
             CornerRadius="6,6,0,0" >
            <ContentPresenter x:Name="ContentSite"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               ContentSource="Header"
               Margin="12,2,12,2"/>
          </Border>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="Border" Property="Background" Value="LightBlue" />
          </Trigger>
          <Trigger Property="IsSelected" Value="False">
            <Setter TargetName="Border" Property="Background" Value="LightGray" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

When a TabItem is clicked, its IsSelected property gets set to true. So what we have to do is add triggers watching the IsSelected property. When the property becomes true, the background color is set to light blue. When it's false, the background color is changed to light gray. Now we've got something that looks like this:

Tabs With Triggers

I think we've got pretty good control over the tabs. Now I want to change how the background and borders look on the tab contents. The style for the tab control is very similar to what we just did for the tab items.

<Style  TargetType="{x:Type TabControl}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabControl}">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <TabPanel
             Grid.Row="0"
             Panel.ZIndex="1"
             Margin="0,0,4,-1"
             IsItemsHost="True"
             Background="Transparent" />
          <Border
             Grid.Row="1"
             BorderBrush="Black"
             BorderThickness="1"
             CornerRadius="0, 12, 12, 12" >
            <Border.Background>
              <LinearGradientBrush>
                <GradientStop Color="LightBlue" Offset="0" />
                <GradientStop Color="White" Offset="1" />
              </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter ContentSource="SelectedContent" />
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

With that code we now have a tab control that looks like this:

Tab Control With Styled Contents

I think that about does it for the WPF TabControl. In this tutorial you've learned how to create and populate a basic tab control as well as more advanced techniques for styling the tabs and tab contents. I think the learning curve for WPF styles is a little steep, but once you understand it, you can see how powerful it is. The best thing, however, is that I didn't have to write any C# code to skin my tab control. If you have any questions about tabs or styles in general, post a comment.

JBaker
01/19/2008 - 19:53

wow thanks for this it will help me out quite a bit.

reply

Kundan
02/19/2008 - 22:37

Well done sir, thanks a lot.....It helps me quite a bit...

reply

Ramzan
02/25/2008 - 02:48

Really good can you explain how can we add Trigger in Tab

reply

The Reddest
02/25/2008 - 13:36

I don't think I understand your question, Ramzan. What specifically are you wanting to trigger on? In my above example, we already have triggers in the tab to change the color when it is selected. Can you extend that functionality?

reply

Ace
02/29/2008 - 11:11

Does anyone know if it is possible to reorder tabs using drag & drop? I imagine this will take some coding but just need to know if it's possible in theory.

reply

Nick Ohrn
03/03/2008 - 04:47

@Ace: I don't think it would be too hard to reorder the tabs using drag and drop. To answer your question in the vaguest terms possible: Yes, it is possible in theory.

reply

The Reddest
03/03/2008 - 14:31

As far as I know there's no built-in way to re-order the tabs using drag and drop. WPF is definitely flexible enough to get the job done, it's just a matter of figuring out how you want to implement it.

reply

Becky
03/04/2008 - 11:19

Wow, this was a very helpful article. I couldn't figure out how to change the selected tab style. Now, I know to use a trigger. Thanks!

reply

Deerchao
04/12/2008 - 01:29

Without setting style for TabItem, the tab will automatically split items into multiple lines if there is not enough room for them in one line, and the content in tabpage is automatically pushed down.
After setting the style, the content in tab page is not pushed down, and covered by the TabItems.
How can I resolve this?
Thanks!

reply

Deerchao
04/12/2008 - 01:41

Oh, I got it.
The best layout tool for this is "DockPanel", setting the TabItems Dock to Top.

reply

Suresh
04/28/2008 - 01:33

Very useful. Layout of this page is really good and easy to follow.
Keep writing

reply

ESp
05/14/2008 - 23:56

(this.TabControl1.Items.Contains(item)) is returning false even though the items are in the tab control collection. how to fix?

reply

Kumar
05/22/2008 - 12:56

How can I add an icon to the tab header from code-behind? TabItem.Header does not expose anything that can be used to do that.

reply

Kevin
05/29/2008 - 13:11

Great article! I have one question though.

For the selected tab, is there a way to turn off the bottom border of the tab? I would like to not see a horizontal line under the selected tab. Since the color of the selected tab and the color of the content area are the same, it would be much better if there weren't a horizontal line separating the two.

Cheers!

reply

Kevin
05/29/2008 - 13:19

I guess I'm answering my own question. I was able to remove all but a hairline border by manipulating the fourth parameter of BorderThickness:

For selected tab:
Setter TargetName=”Border”
Property=”BorderThickness” Value=”1,1,1,0″

For non-selected tabs:
Setter TargetName=”Border”
Property=”BorderThickness” Value=”1,1,1,1″

It would be nice to get rid of the remaining hairline, but it looks much better now.

reply

Rakesh Chimanpure
06/12/2008 - 03:29

Gr8 Work ...
Pretty useful for me...
Can you please suggest me How to put the Tab Button at the Bottom as they are in the Excelsheets...
I mean the showing the TabControl Upside Down...

reply

Rachel Hagerman
06/15/2008 - 15:12

This was exactly what I was looking for, thanks!

reply

Neo
07/21/2008 - 12:58

Thank you alot, it helped

reply

Seawalker
07/24/2008 - 11:56

Great job of depicting the basic tab control components, but you didn't touch on some of the deeper details such as the fact that the Font of the tabItems cannot be set within the template or styles but only within the tab control tabItem itself. If you are aware of a way to set this as a style property then please let me know.

reply

Tom Ward
08/12/2008 - 07:57

Excellent tutorial, most useful!

reply

Bilal Haider
08/25/2008 - 04:01

Nice Work!
When i od this i got error of already contents define etc.

It gives me error.
i.e i want to display diffrent controls on each tab items area.
Did you got my point.

reply

Bilal Haider
08/25/2008 - 04:20

Nice work dear.
When i add more than one controls in a tabitem it gives me an error that content property already set.
When i add a stackpanel inside the tabitem and then insert controls in it it works fine.
Does it mean that we can't place controls at our wish inside tabitem like we place controls on a WPF Window.
Actualy i need to display diffrent controls on each tab selection.
Thanks and waiting for your reply.

reply

The Reddest
08/25/2008 - 06:49

The tabitem can only contain one control. If you want more than one control in the item, first add a layout control (canvas, grid, stackpanel, etc). Then place multiple controls inside the layout control. Almost all WPF controls that have a Content property work this way.

reply

sp3tsnaz
12/27/2010 - 06:12

well, i got a bit confused by your answer :S

what i do is :

<tabitem>
    <Grid/>  
</tabitem>
<tabitem>
    <Grid/>  
</tabitem>
<tabitem>
    <Grid/>  
</tabitem>

is this the right approach ?

reply

The Reddest
12/29/2010 - 23:14

That approach will work. Now just stick whatever you want to show up in the TabItem inside those Grids.

reply

Hardy
09/16/2008 - 06:17

Great article !

Does anyone know how to implement a WPF tab-control which uses the same control(s) for all tabs ? Switching the selected tab-item should only exchange the data of the controls...
Thanks

reply

Diego Dias
10/10/2008 - 10:47

Hi,

I would know how I do to change forecolor of the Header

Thank's

reply

Mark Caple
10/15/2008 - 17:36

Accelerator keys.

I was just wondering if anyone knew how to get around the fact that styling removes the ability to use accelerator keys. For example if the tabitem header for "Cheese" was changed to "_Cheese" then the styling causes the underscore to always be shown whereas without styling the underscore will appear under the "C" when the alt key is pressed.

Thanks

reply

Jaideep
12/12/2008 - 00:28

What happens here is that your nice gradient stuff is going horizontally, but I have to set a fixed margin for it to expand vertically.

any suggestions?

reply

Nick60
01/03/2009 - 04:00

Many thanks for this post, very helpfull.

Can I make a very small correction about the image of "peperoni" (as we call it here in Italy)?

Have a look: http://en.wikipedia.org/wiki/Capsicum

reply

mike
02/26/2009 - 21:33

how to add keyboard shortcut to tabcontrols?thanks

reply

at your command
03/01/2009 - 17:08

Just started WPF and thanks for your article I have nice tabs.

I have black line on the right side of my tab container that I cannot remove? What is this?

Thanks again.

reply

Michael Stone
03/11/2009 - 10:21

Re: Triggers
Don't need two. The property automatically resets itself when the condition is no longer met.

Re: Hairline border
Two things:
1st - remove bottom border on selected, as Kevin suggested.
2nd - add SnapToDevicePixels on the tab and control borders. The hair line is anti-aliasing effects.

The whole thing I put together:

<Window x:Class="TabControl.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style  TargetType="{x:Type TabControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TabPanel
                                Grid.Row="0"
                                Panel.ZIndex="1"
                                Margin="0,0,4,-1"
                                IsItemsHost="True"
                                Background="Transparent" />
                            <Border
                                Grid.Row="1"
                                BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="0, 12, 12, 12"
                                SnapsToDevicePixels="True">
                                <Border.Background>
                                    <LinearGradientBrush>
                                        <GradientStop Color="LightBlue" Offset="0" />
                                        <GradientStop Color="White" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter ContentSource="SelectedContent" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
       
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border
                            Name="Border"
                            Background="LightGray"
                            BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="6,6,0,0"
                            SnapsToDevicePixels="True">
                            <ContentPresenter x:Name="ContentSite"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header"
                              Margin="12,2,12,2"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="LightBlue" />
                                <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid Margin="5">
        <TabControl>
            <TabItem Header="Cheese">
                The Cheese Tab
            </TabItem>
            <TabItem Header="Pepperoni">
                The Pepperoni Tab
            </TabItem>
            <TabItem Header="Mushrooms">
                The Mushrooms Tab
            </TabItem>
        </TabControl>
    </Grid>
</Window>

reply

ewoo
04/17/2009 - 06:13

How do you make the tabcontent change color based on the tabitem. For example, the tabcontent change to orange when someone select tab cheese and tabcontent change to red when someone select pepperoni

reply

Anonymous
04/26/2009 - 15:06

A couple of other questions about the tab control:

1) Is it possible to have multiline text on a tab somehow? TextWrapping isn't a property of Textblock that can be altered in the ContentPresenter tag? Is there another way round it as a client I'm working for requires this feature.

2) How do you get tabs to appear as if they overlap slightly like the default ones in windows while altering their appearance to make them have rounded corners?

reply

Jackie White
05/11/2009 - 21:54

can i see where the tabpanel place?

It is located in the grid row ,but I can't see where it exitst.

just only the border.

I got it .It is the container of tabitems.

reply

dfirka
09/02/2009 - 13:14

Can you advice me on how to change the style to support TabStripPlacement="Bottom"?

Thanks

reply

The Reddest
09/02/2009 - 16:05

You should just be able to add a setter for that property to the style:

<Setter Property="TabStripPlacement" Value="Bottom" />

reply

ghanson
01/07/2010 - 20:48

Was there any answer to,

Great article !

Does anyone know how to implement a WPF tab-control which uses the same control(s) for all tabs ? Switching the selected tab-item should only exchange the data of the controls...
Thanks

reply

gehho
02/15/2010 - 09:48

Note that the TabControl is explicitly designed to provide different UIs for different tabs.
I think the "Master-Detail" approach using a Listbox would be a better approach for your scenario. See http://bea.stollnitz.com/blog/?p=13 for details or just google for "master detail wpf".
A Listbox could represent the tabs (you would have to provide an appropriate ControlTemplate for this), while another control could present the data.

gehho.

reply

Massih
03/28/2010 - 08:11

I've searched about custom tabcontrol for a while, and this is the best (the only)tutorial that has it all
thanks a lot

reply

component
04/15/2010 - 03:03

Hello. How to add close button to tab? Like in Internet Explorer 8 tab.

reply

vbnetqueen
05/10/2010 - 08:51

hi there...i need to have a verticle tab. then when you select an item from this tab, i then needs tab relating to the vertical tab to appear horizontally. Is this possible???

reply

hardshell
05/24/2010 - 18:03

I could not implement the code in WPF browser application

reply

samans
06/07/2010 - 07:34

oh nice article Thank you so much.
But I have another question. Is it possible to change the shape of TabItems? like Google Chrome. or better to ask is it possible to make Path then use it as a TabItem?
Using TabItem Header it will be possible but the problem will show when TabItem will select cause the color that is possible to change during selected has a shape of original not a path.

reply

walkerstewart
07/29/2010 - 03:28

I had the same thing a few weeks back and your on the right path. The code block below is the code I used to apply the style to all my tabs. Note that I don't think that this is perfect, as you'll still need to set a min width to ensure the tabs don't wrap badly (plus I had to do some hacking to get the tabs to overlap properly), but should give you a good starting point at the very least.

Enjoy, Stewy

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type TabControl}">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="8"></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="22"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TabPanel Grid.Column="1" Grid.Row="0" IsItemsHost="True"></TabPanel>
                        <ContentPresenter Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" ContentSource="SelectedContent" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style>
                    <Setter Property="Control.Height" Value="20"></Setter>
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid Grid.Column="1" Height="20">
                                    <Path Data="M0,0 C0,0 6,20 10,20 H100 C100,20 104,20 110,0 H0 " Margin="-8 0 0 0" Fill="LightGray" Grid.Column="0" StrokeLineJoin="Round" Stroke="DarkGray"></Path>
                                    <Path Data="M10,20 H100" Stroke="DarkGray" StrokeThickness="2" Margin="-8 0 0 0" ></Path>
                                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-8 0 0 0"  Grid.Column="0" ContentSource="Header" />
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Trigger.Setters>
                                            <Setter Property="Background" Value="Beige"></Setter>
                                            <Setter Property="Panel.ZIndex" Value="1"></Setter>
                                        </Trigger.Setters>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="false">
                                        <Trigger.Setters>
                                            <Setter Property="Background" Value="LightGray"></Setter>
                                        </Trigger.Setters>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

reply

walkerstewart
07/29/2010 - 03:25

To those looking to change the style of the font of a tab, you can perform the below change. Basically you surround the ContentPresenter with a TextBlock, and assign it a x:Name. you can then reference this in the Trigger section of the code. The font colour, size etc will cascade down to the actual text. Note that this may be overridden by overall text styling you may be applying at a global level.

<ControlTemplate TargetType="{x:Type TabItem}">
    <TextBlock x:Name="textItemGrid">
        <ContentPresenter VerticalAlignment="Center" Margin="5 0 5 0" HorizontalAlignment="Center" ContentSource="Header" />
    </TextBlock>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Trigger.Setters>
                <Setter Property="Foreground" TargetName="textItemGrid" Value="Purple"></Setter>
                <Setter Property="FontSize" TargetName="textItemGrid" Value="20"></Setter>
                <Setter Property="Panel.ZIndex" Value="1"></Setter>
            </Trigger.Setters>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

reply

sb
08/24/2010 - 14:08

Hi,
How can I add images to the tab item for each different state. For unselected state, Selected state and mouse over state with all different images for each state and each tab item.

reply

chemicalsid
09/03/2010 - 22:55

how can i created nested tabs, such that each tab on the top is a category, each category has sub-categories represented by tabs on the right, and each sub-category has pages represented by tabs on the bottom. Also have the ability to add tabs using say a '+' sign for each area - category, subcategory, pages.
I know this is a more complicated scenario, but any help/hints would be great.
Thanks.

reply

Mouli
01/26/2011 - 23:12

Perfect article on the tab control...many thanks for the post.

reply

Jacob White
03/22/2011 - 18:12

Is there a way to dock the tab container so when you maximize the window the tab container resizes?

reply

Vikram
05/13/2011 - 05:29

I want to add the the tab items to a tab control in dynamically from code side, but the problem is that I want to have some other control in the tab item like tree view and stack panel. Do I need to create a different user control in this case and it to the items collection of the tab control.

reply

The Reddest
05/13/2011 - 13:41

You'd probably want to make a control that represents the TreeView and StackPanel. You can then add this control to a TabItem at run-time.

// This is the TreeView/StackPanel control.
var customControl = new MyCustomControl();

// Create a TabItem and set its content
// to the custom control.
var tab = new TabItem()
{
  Content = customControl,
  Header = "My Tab Header Text"
};

// Add the new tab to the tab control.
_myTabControl.Items.Add(tab);

reply

Vikram
05/15/2011 - 23:24

thanks a lot it helped me.

reply

Anonymous
05/17/2011 - 11:27

Thank you.

reply

Winnie
05/30/2011 - 02:14

the article was very helpful. thank you
keep posting more of such articles.

reply

Tony
09/05/2011 - 07:08

Hi, thanks for the article, it is helpful, but it does not answer my exact problem so I decided to ask - I need the header (title) to change upon loading a file (in a C# program), and display the name of said loaded file...I guess I don't know how to make the C# code interact with the XAML code...I'd be grateful if someone can help me...thanks in advance!!

reply

The Reddest
09/05/2011 - 14:02

In the XAML file, you should name the tab item.

<TabControl>
  <TabItem x:Name="myTabItem" />
</TabControl>

Then in the C#, you can simply reference the tab item by name.

myTabItem.Header = "myFileName.txt";

reply

Thijs
11/03/2011 - 13:56

Super handy and good article!

But can someone help me to make a tab control like this one?

http://www.istartedsomething.com/wp-content/uploads/2008/01/lawson_1l.jpg

Thx in advance

reply

Kelum
11/15/2011 - 03:26

Greate Work!...

reply

Angavar
12/24/2011 - 01:41

Thanks, this was very helpful.

reply

Enoque - Brasil
12/25/2011 - 21:44

Very clear, intelligent and completed... thank you very much!

reply

Johan
01/06/2012 - 13:31

Very nice article, thank you. Actually I arrived here after searching how to "control the tab order" of elements in WPF : )

reply

Add Comment

Put code snippets inside language tags:
[language] [/language]

Examples:
[javascript] [/javascript]
[actionscript] [/actionscript]
[csharp] [/csharp]

See here for supported languages.

Javascript must be enabled to submit anonymous comments - or you can login.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.