Click here to Skip to main content
11,648,960 members (83,291 online)
Click here to Skip to main content

An Extended WPF TabControl

, 5 Apr 2009 CPOL 202.9K 7.9K 146
Rate this:
Please Sign up or sign in to vote.
Altering the WPF TabControl to show a single row of scrolling TabItems
Screenshot - TabControl_Default.jpg

Introduction

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 TabItem.

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.

Properties/Events

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 button.
  • AllowDelete - Setting this property to truewill allow the end user to delete tabitemsfrom the control by clicking on the close buttonon the selected tabitem.

If the above properties are set to true, there are three events that go with these properties. They are TabItemAdded, TabItemClosingand 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 true, 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 tabitemwhen added.

Finally, there are three extra properties of type Brush which are used for coloring the tabitemsbased on their state:

  • TabItemNormalBackground
  • TabItemMouseOverBackground
  • TabItemSelectedBackground

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.

TabControl_IE7.jpg

There are four properties which take an active part in the arrangement of the tabitems. They are:

  • TabItemMinWidth
  • TabItemMaxWidth
  • TabItemMinHeight
  • TabItemMaxHeight

Arranging the TabItems

There are three ways in which the tabcontrolarranges its tabitems.
The following description is relevant if the TabStripPlacementproperty is set to Topor Bottom.

  1. 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 TabItemMaxWidthand TabItemMinWidthproperties.
  2. 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.
  3. 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 tabitemsis 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:

xmlns:r="clr-namespace:Wpf.Controls;assembly=Wpf.TabControl"

The demo provided shows how to add the control to a window and set its properties.

History

  • 13-Oct-2007: Initial upload
  • 09-Mar-2009: Implemented ItemsSource binding & bug fixes
  • 05-Apr-2009: Updated source code

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

alrh
Software Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionFirst Tab isfixed Pin
Patrick Blackman20-Jun-12 17:14
memberPatrick Blackman20-Jun-12 17:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150804.4 | Last Updated 5 Apr 2009
Article Copyright 2007 by alrh
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid