CanOz Blog

A question came up in the vbCity Forums that I participate in about changing the background colour of the header portion of the TabControl.  The original question was about changing the colour of the tabs themselves (original question).

vbCity Leader (and Microsoft MVP) Ged Mead posted up code to change the colour of the tabs, but once the tab control's DrawMode property was set to “OwnerDrawFixed” the portion of the tab control without button changed to the default colour of “Button” which made it no longer the same as the background colour of the form. 

I recalled that Ged had posted up a WPF solution for the background colour of a tab previously and figured that with WPF it may well be possible to change the colour for the rest of the tab header also. 

So I forged ahead with my attempt to find a solution.  Not being in any way shape or form a pro with WPF, I decided to try modifying the tab control with Expression Blend instead of Visual Studio.  After a little messing around I did find that you can set the background colour of a tab control header to whatever colour you want and still have the tabs themselves with different colours. 

I started out by taking the XAML that Ged posted and pasted that into my Expression Blend project as a starting point so it looked like the following.  ( I did have to remove the image from the 3rd tab as I didn't have that particular image on my computer.) 

Then I went in and began to look at editing the template of the tab control itself. 

With very little fuss, I was able to set the background property of the TabPanel (this is the part of the tab control which holds the tab buttons) and I ended up with a coloured header background.

To accomplish this change you can either edit the XAML of the tab control, if you know what you are doing with XAML, and add in markup for the tab panel of the tab control and include a color for the background attribute.

or you can, as I did, right click on the tab conrol and from the popup menu “edit control parts (template)”.  Moving your mouse over “edit control parts (template)” causes a submenu to become visible and you then select “edit a copy”.  The Create Style Resource window opens and you are faced with a few choices.  I decided to keep the default choices (resource name and define in this document) just for ease.  Click the “OK” button and you are ready to start making changes to the template.

Since all I wanted to do was change the background of the tab panel, I selected it by clicking on the part of the tab panel that didn't have any buttons and in the properties pane I set the background to the colour that I wanted.  That is how easy it was to get the effect that was required. 

Once I had made all the changes required, I simply copied the XAML of the tab control from Expression and pasted it into a Visual Studio project and was ready to continue.

Below is the complete XAML for the tab control as shown above.