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.
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:
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.
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:
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:
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:
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.
wow thanks for this it will help me out quite a bit.
Well done sir, thanks a lot.....It helps me quite a bit...
Really good can you explain how can we add Trigger in Tab
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?
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.
@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.
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.
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!
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!
Oh, I got it. The best layout tool for this is "DockPanel", setting the TabItems Dock to Top.
Very useful. Layout of this page is really good and easy to follow. Keep writing
(this.TabControl1.Items.Contains(item)) is returning false even though the items are in the tab control collection. how to fix?
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.
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!
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.
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...
You can use the TabStripPlacement for this purpose. If you want to - let's say Rotate - the TabHeaders you can Override your TabHeader Style with a Layout/Rotatetransform.
Greetz
This was exactly what I was looking for, thanks!
Thank you alot, it helped
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.
Excellent tutorial, most useful!
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.
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.
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.
well, i got a bit confused by your answer :S
what i do is :
is this the right approach ?
That approach will work. Now just stick whatever you want to show up in the TabItem inside those Grids.
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
Hi,
I would know how I do to change forecolor of the Header
Thank's
You can use a Label as Content Container instead of a Border. There you can simply implement a Setter with
.
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
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?
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
Peperoni is Italian for a type of pepper, but pepperoni (two p's) is English for a type of American salami that's often used as a pizza topping (named after the Italian word but not meaning the same thing). That's what his icon is depicting.
(Awesome guide!)
how to add keyboard shortcut to tabcontrols?thanks
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.
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:
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
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?
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.
Can you advice me on how to change the style to support TabStripPlacement="Bottom"?
Thanks
You should just be able to add a setter for that property to the style:
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
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.
I've searched about custom tabcontrol for a while, and this is the best (the only)tutorial that has it all thanks a lot
Hello. How to add close button to tab? Like in Internet Explorer 8 tab.
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???
I could not implement the code in WPF browser application
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.
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
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.
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.
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.
Perfect article on the tab control...many thanks for the post.
Is there a way to dock the tab container so when you maximize the window the tab container resizes?
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.
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.
thanks a lot it helped me.
Thank you.
the article was very helpful. thank you keep posting more of such articles.
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!!
In the XAML file, you should name the tab item.
Then in the C#, you can simply reference the tab item by name.
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
Greate Work!...
Thanks, this was very helpful.
Very clear, intelligent and completed... thank you very much!
Very nice article, thank you. Actually I arrived here after searching how to "control the tab order" of elements in WPF : )
just an outstanding article. this is exactly what I've been looking for, for my project.
Cool!
Hi,
How do you add controls dynamically to the TabItem, that can be used normally.
Let me explain what i mean... right now, i am using the TabItem's LeftMouseDown event to create a new TabItem, and add controls to the old one... for example:
[Add +] -user clicks this tab item- [Remove -][Add +]
The [Remove -] TabItem now contains 6 controls in a grid (labels and textboxes).
The issue i have now, is that not matter what i click on within that TabItem, the TabItem's LeftMouseDown event is fired, which in turn removes that TabItem (since it's in Remove mode now).
The behavior i'm looking for i guess is to be able to add items to the Tab, and fill those in, and add another tab, fill those in, etc etc etc...
Should i be adding a Button to the Header property instead and catching that event somehow? is the Header property the same as Content as in it takes anything or does it just take text?
Any help would be greatly appreciated!
Matt
ahhhh yes... that actually solved it. Try things out Matt! try things out ;)
for future notice to all of you, the best way to do this is to add a button as a Header for the TabItem, and add an event handler to that instead, which adds a new TabItem to the TabControl.
From that event handler, adding the grid and any controls to the Content property of the TabItem will add those in there, and you can click them without creating an event handler for the TabItem itself.
Neat!
Very nice and informative post. It helped me lot. Thanks for sharing with us. I've checked other posts during searching time over the internet for related to this post. That posts also explained very well on tab control in WPF. Here I want to share that posts link.....
http://msdn.microsoft.com/en-us/library/system.windows.controls.tabcontrol.aspx
and
http://mindstick.com/Articles/de00186c-3fc5-4c5c-9579-53ddc5051379/?Tab%20control%20in%20WPF
Thanks everyone for wonderful post.
Brilliant...this is just what I was after and have managed to custimise a tabcontrol to the way I like it. However I wondered if anyone else is having the same issue as me?
If I try and add a grid within the tabcontrol so that I can add textboxes, buttons, etc. The grid rather than sitting within the panel of the tabcontrol actually sits higher...so its sitting to the top left corner of the first tab to the full right handside and then is short from the bottom --the same height as the tabs themselves.
Many thanks
Perfect Article!
Thank you!
Very easy for follow tutorial, thanks. Can someone provide solution how I can set the selected TabItem to be a little taller/bigger/larger than the others. I've tried a lot of things connected with changing margin/padding of the border/contentPresenter but it didn't work for me.