I recently decided to have a go at changing the built-in WPF
TabControl so that it behaves similar to the way in which Internet Explorer 7 works.
The main area I wanted to change was the way in which the
TabItems are arranged, currently the built-in
TabControlwill pack and stack items, so the more items there are, the more room is required for the headers, taking up space from the actual content of the
With Internet Explorer 7, tabs remain on a single row and will scroll in and out of view. This is the way I wanted this control to behave.
There are a few extra properties (Dependency Properties) and events added to the control.
AllowAddNew - Setting this property to
truewill allow the end user to add new
tabitems to the control via a
AllowDelete - Setting this property to
truewill allow the end user to delete
tabitemsfrom the control by clicking on the close
buttonon the selected
If the above properties are set to
true, there are three events that go with these properties. They are
TabItemClosed: all provide a reference to the
TabItembeing added/removed, the
TabItemClosingevent providing a place to cancel the close if required.
AddNewTabToEnd - If this property is
tabitemsadded using the
AddNew buttonwill be added to the end of the row of
tabitems, otherwise the new
tabitemwill be inserted immediately after the current selection.
SelectNewTabOnCreate - If this property is
true, focus will be moved to the new
Finally, there are three extra properties of type
Brush which are used for coloring the
tabitemsbased on their state:
If you look at the picture at the top of this article, it shows the default style for the
TabControl. I've intentionally made this very basic. By just using the extra
Backgroundproperties, you can easily change the appearance of the
TabControl. As this picture shows, by adding a few
LinearGradientBrushes, you can get something that resembles Internet Explorer 7.
There are four properties which take an active part in the arrangement of the
tabitems. They are:
Arranging the TabItems
There are three ways in which the
The following description is relevant if the
TabStripPlacementproperty is set to
- If the combined widths of the
TabItemsis less than the available visible space, then we just arrange them one after the other, taking into account the
- If the combined widths are greater than visible, then calculate the width required for all the
tabitemsso that all are visible. If this width is greater than the
TabItemMinWidthproperty, then we arrange the
tabitemsusing this calculated width.
- Once we add too many
tabitemsthat their widths would be less than the
TabitemMinWidthproperty, then scrolling will be enabled.
The class that is responsible for arranging the
VirtualizingTabPanel. As the name suggests, this panel derives from the VirtualizingPanel class and implements the IScrollInfo interface. I won't describe here what a
VirtualizingPanelis, instead I will just direct you to this Blog post by Dan Crevier which describes what it is and how to implement one.
Using the Code
To use the control, you will need to add a reference to the
Wpf.TabControlassembly, then add an
xmlns to the window:
The demo provided shows how to add the control to a window and set its properties.
- 13-Oct-2007: Initial upload
- 09-Mar-2009: Implemented
ItemsSource binding & bug fixes
- 05-Apr-2009: Updated source code