With the new release of Silverlight 2 Beta 2 came a new drop of controls that allow the designer and developer to build tabbed content that we have become used to, the TabControl, TabPanel and TabItem don't reside in the standard Silverlight Controls assembly but live in the System.Windows.Controls.Extended assembly. After reading Tim Heuer's post about the TabControl and not having used the controls before I thought that it was about time I got to know these new controls.
To create a simple TabControl you can drag the TabControl from the toolbar in Blend and drop it on to your canvas and resize the control to your requirements, next select the TabItem control, making sure your TabControl is selected double click the TabItem on the toolbar and you can add in as many Tabs as you require, nice and easy. This is the simplest tabbed control you can build. But what happens if you want to change the style and template of the control to come in line with your applications skin ?? In a previous post I covered skinning a ListBox Control and its visual elements, in this post I will attempt to cover the tabbed controls that are available in Beta 2.
When we want a higher level of control of the TabControl and its items we need to create our own custom Style and Control Templat
e for the TabControl and TabItem's. In Blend select your TabControl and from the Object menu option select edit style and select the create empty sub menu option, I called mine MyTabControlStyle, we then get to see our new style which is rather plain as it is empty, so lets move on and edit the UI elements of the TabControl template. Select the style in the object tab and right click and edit the control parts template, and select the Edit a copy option, I called mine MyTabControlTemplate calling the style and the associated control template is the standard naming convention that I use so that it it easy to keep track of what templates belong to what styles and vice versa. Now if you check out your TabControl you will find that what once looked like a TabControl now looks nothing like a TabControl, the reason behind this is because we have just changed the style of the control and its template both of which are empty. What need to do is workout what the UI elements we want to use so that we can create the required design. The first UI 
Element that we need to add is a grid to hold all the other UI Elements. Once we add the grid into the control we then also get the different common states that are supported by the control template. In this case the Common States are Normal and Disabled. Next UI control too add into the control template is the TabPanel control. The TabPanel control provides a container where the TabItem's will live, therefore the TabPanel plays host to our TabItem's. Next up is our Border UI element for the control. Next and most importantly is the ContentControl for the content that will be displayed by each TabItem added into the TabControl.
When you add the ContentControl to the control template it will automatically create the template bindings for you. You can change these settings in Blend 
when you have the ContentControl selected you will see that there are yellow squares next to the group that is bound. When you select the square you will get a popup where and at the bottom is a template binding option with a bunch of submenu options that you can choose based on what you want to bind up to. The TabPanel part of the control template can be used to change the size of the TabItems that are hosted inside so that you can easily change the height and placement of the TabPanel and this layout will effect the TabItems hosted inside.
The next step is to move on to the TabItem, follow the same steps again by creating a style and then the template. Once you have you empty control template ready its time to add the UI elements that we want to the template. First off add a Grid to host all the other visual elements we are going to add. Next add in a border for the outer part of the TabItem. Inside the outer border add a second border which we animate when the user mouse's over the TabItem. To this border we need to a grid that will host a rectangle for t
he selected background when the TabItem is selected we also need to add a Content Control that will host the Header content of the TabItem. Now we have the basic structure in place for the TabItem we can start to customise the tab and create the design required.
There is a gotcha here which caused me some pain for a while. The TabItem design that I wanted to build was a tab which has rounded corners and positioned slightly above the content rendered in the TabControl Content area very similar to the TabItem controls in Blend. After a number of attempts at building the TabItem control template I could not get the design that I wanted as the background of the control would not rendered correctly after it had been selected. So even though the UI element rendered correctly when the page loaded once you had selected the TabItem and selected another TabItem in the TabPanel the Look and Feel changed as the background had changed to the background of the TabItem's root element. This was very unexpected behaviour as you can see the TabBorder lives within a Grid and something somewhere was changing the background colour of the grid to be the background colour of the TabItem. What the problem turns out to be is the naming of the controls in the Control Template. I had named each of the Visual Elements the same as the default TabItem Control Template, based on the help that I found in the docs. It turns out that there is some code in Silverlight that deals with the TabItem which uses margins to move the TabItem and in here the code looks for the default names of the UI elements to perform these interactions. Therefore by changing the names of the UI elements this solved all my problems.
When building the TabItem you will want to set the UI elements width and height to Auto, however this is not great when your are trying to get the look and feel that you want for your TabItem, personally I make the control larger until I have a layout that is close to the design, t
hen reset everything back to auto before building the solution. Once you have all the elements in place and the layout you want then next it's time to add in the interaction animations for the different states of the control. The TabItem has a number of different states that we can wire up to. The first state I am going to wire up to is the MouseOver. In Blend select the MouseOver State from the state tab and select the TabItemInnerBorder UI element, and change this to the colour of your choice. Then repeat the same steps for the other visual states that you want to change. I went for a different coloured background for each different state, to give hints to the user the image on the right screen shot of the final design where the first tab is in a selected state, second tab has a MouseOver state and the third tab is in a normal state.
You can download the styles and templates from my skydrive folder.