Introduction

Arguable Office 2007 has revolutionized the way modern user interfaces will look like with great innovations like the ribbon... The control I would like to focus on in this article though is the Office 2007 Navigation Pane, or more specifically, how to recreate the Navigation Pane by restyling a TabControl!

The WPF team has done an excellent job of reducing the need to create custom controls by allowing "lookless controls" to be re-styled! This is how the Navigation Pane looks:

Before I begin restyling, to keep the beginner status for my article, I will briefly explain what a Style and Template are and how they are used here!

What is a Style?

A Style's main function is to group together property values that could otherwise be set individually. The intent is to then share this group of values among multiple elements. If you look at a simple Style in XAML, you will notice that generally it has a TargetType set and then a collection of Setters. Each Setter then allows you to replace a given Property value with the provided value. Here is a very basic example:

While this is the standard definition of a Style, in this restyle article, it is more used to just replace the Template property.

What is a Template?

A Template allows you to completely replace an element’s visual tree with anything you can dream up, while keeping all of its functionality intact. Here is an example of how we use a style/setter to replace a Template.

Since the Template is just a property on the Control object (from which TabControl derives), it can also be replaced by using a setter! We can now replace the complete visual tree while keeping the basic functionality of a TabControl!

All of this is automatically created by blend by right-clicking on the TabControl and selecting "Edit Control Parts (Template)" -> "Edit a Copy..."

Next, in XAML just replace the TabPanel with the StackPanel. The only important property to set on the StackPanel is the IsItemsHost="true".

After replacing the TabPanel with a StackPanel, set each TabItems height to 30, the TabControl's Background to White and the BorderBrush to #FF6593CF.

Well, this looks better...

What are Resources?

Resources or more specifically, ResourceDictionary is just a dictionary of key/value pairs that can be accessed from XAML. It is used here to define brushes that are commonly used. Here is a simple example:

<SolidColorBrushx:Key="OutlookButtonForeground"Color="#FF204D89"/>

and here a use for it:

Foreground="{DynamicResource OutlookButtonForeground}"

Restyling the TabItem

Next, create a style for a TabItem by right-clicking on one of them and selecting "Edit Control Parts (Template)" -> "Edit a Copy..."

Before I dig into the default style created, I just want to create two brush resources. The first brush resource is the normal color of a Navigation Pane button:

What are Triggers?

Triggers have a collection of Setters just like Style (and/or collections of TriggerActions). But whereas a Style applies its values unconditionally, a trigger performs its work based on one or more conditions. There are three types of triggers:

Property triggers — Invoked when the value of a dependency property changes

Data triggers — Invoked when the value of a plain .NET property changes

Event triggers — Invoked when a routed event is raised

We will make use of an Event Trigger. The TabItem provides us with an IsSelected routed event!

Selection

We now need to indicate (by changing color) that an item is selected. Again, we create a brush to represent the color the button needs to change to once highlighted: