Click here to Skip to main content
11,412,578 members (73,065 online)
Click here to Skip to main content

An Extended WPF TabControl

, 5 Apr 2009 CPOL
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 TabControl will 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 true will allow the end user to add new tabitems to the control via a button.
  • AllowDelete - Setting this property to true will allow the end user to delete tabitems from the control by clicking on the close button on the selected tabitem.

If the above properties are set to true, there are three events that go with these properties. They are TabItemAdded, TabItemClosing and TabItemClosed: all provide a reference to the TabItem being added/removed, the TabItemClosing event providing a place to cancel the close if required.

  • AddNewTabToEnd - If this property is true, tabitems added using the AddNew button will be added to the end of the row of tabitems, otherwise the new tabitem will be inserted immediately after the current selection.
  • SelectNewTabOnCreate - If this property is true, focus will be moved to the new tabitem when added.

Finally, there are three extra properties of type Brush which are used for coloring the tabitems based 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 Background properties, 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 tabcontrol arranges its tabitems.
The following description is relevant if the TabStripPlacement property is set to Top or Bottom.

  1. If the combined widths of the TabItems is less than the available visible space, then we just arrange them one after the other, taking into account the TabItemMaxWidth and TabItemMinWidth properties.
  2. If the combined widths are greater than visible, then calculate the width required for all the tabitems so that all are visible. If this width is greater than the TabItemMinWidth property, then we arrange the tabitems using this calculated width.
  3. Once we add too many tabitems that their widths would be less than the TabitemMinWidth property, then scrolling will be enabled.

The class that is responsible for arranging the tabitems is 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 VirtualizingPanel is, 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.TabControl assembly, 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

Comments and Discussions

 
QuestionFix the no of tabs in the tabcontrol Pin
najmbe at 13-Jul-14 22:04
membernajmbe13-Jul-14 22:04 
QuestionHow can I integrate this into the Prism technology? Pin
VcDeveloper1 at 28-May-13 16:38
memberVcDeveloper128-May-13 16:38 
GeneralMy vote of 4 Pin
vanwood at 26-Feb-13 3:05
membervanwood26-Feb-13 3:05 
GeneralMy vote of 5 Pin
hari111r at 28-Nov-12 18:55
memberhari111r28-Nov-12 18:55 
QuestionFirst Tab isfixed Pin
Patrick Blackman at 20-Jun-12 18:14
memberPatrick Blackman20-Jun-12 18:14 
QuestionHow I can use this Tab control in WinApp projects? Pin
ctrlz-jc at 13-May-12 19:19
memberctrlz-jc13-May-12 19:19 
GeneralMy vote of 5 [modified] Pin
Steve Aube 1 at 26-Dec-11 12:24
memberSteve Aube 126-Dec-11 12:24 
GeneralMy vote of 5 Pin
Kashif_Imran at 11-Dec-11 1:31
memberKashif_Imran11-Dec-11 1:31 
GeneralMy vote id 5 Pin
edallos at 22-Mar-11 1:46
memberedallos22-Mar-11 1:46 
GeneralMy vote of 5 Pin
Slacker007 at 8-Dec-10 8:24
memberSlacker0078-Dec-10 8:24 
GeneralModifying tab control to show the selected tabs header in bold [modified] Pin
ACanadian at 17-Sep-10 10:24
memberACanadian17-Sep-10 10:24 
GeneralMy vote of 4 Pin
Steven Chen at 11-Aug-10 7:03
memberSteven Chen11-Aug-10 7:03 
GeneralMy vote of 5 Pin
zokbari at 2-Aug-10 8:46
memberzokbari2-Aug-10 8:46 
QuestionWhat controls the default xaml when first dropped onto designer? Pin
patc at 23-Jun-10 17:53
memberpatc23-Jun-10 17:53 
GeneralProperties TabItemNormalBackground, TabItemMouseOverBackground, TabItemSelectedBackground for each TabItem Pin
jiglriv at 10-May-10 0:42
memberjiglriv10-May-10 0:42 
GeneralIsFixedSize property question Pin
Member 4555330 at 9-May-10 5:22
memberMember 45553309-May-10 5:22 
QuestionThank you and a question Pin
msabatini at 28-Apr-10 7:29
membermsabatini28-Apr-10 7:29 
QuestionWhat a good article Pin
superdiablo at 18-Apr-10 7:17
membersuperdiablo18-Apr-10 7:17 
GeneralThank you and new functionality implemented Pin
Evgeny Vinnik at 2-Jul-09 19:09
memberEvgeny Vinnik2-Jul-09 19:09 
GeneralRe: Thank you and new functionality implemented Pin
Jose Maldonado at 5-Jan-10 6:38
memberJose Maldonado5-Jan-10 6:38 
GeneralRe: Thank you and new functionality implemented Pin
Member 1551426 at 18-Nov-10 4:30
memberMember 155142618-Nov-10 4:30 
GeneralBug: RepeatRight and RepeatLeft buttons do not display in WindowUsingItemsSourceProperty.xaml Pin
Rolenun at 24-May-09 19:27
memberRolenun24-May-09 19:27 
General[My vote of 2] need code snippets and discussion Pin
Donsw at 16-Apr-09 7:44
memberDonsw16-Apr-09 7:44 
GeneralRe: [My vote of 2] need code snippets and discussion Pin
John Simmons / outlaw programmer at 17-Jun-11 3:15
mvpJohn Simmons / outlaw programmer17-Jun-11 3:15 
GeneralMy vote of 2 Pin
John Simmons / outlaw programmer at 15-Apr-09 3:53
mvpJohn Simmons / outlaw programmer15-Apr-09 3:53 
GeneralRe: My vote of 2 Pin
r2d2ro at 17-Jun-11 1:12
memberr2d2ro17-Jun-11 1:12 
GeneralRe: My vote of 2 Pin
John Simmons / outlaw programmer at 17-Jun-11 3:14
mvpJohn Simmons / outlaw programmer17-Jun-11 3:14 
GeneralCrash while resizing/minimizing window Pin
Member 6038196 at 5-Apr-09 2:18
memberMember 60381965-Apr-09 2:18 
GeneralRe: Crash while resizing/minimizing window Pin
alrh at 5-Apr-09 5:08
memberalrh5-Apr-09 5:08 
GeneralAwesome Pin
nitewulf50 at 1-Apr-09 9:32
membernitewulf501-Apr-09 9:32 
GeneralBlink tab item in changes. Pin
Morteza_Ar at 27-Mar-09 3:26
memberMorteza_Ar27-Mar-09 3:26 
QuestionExtended Silverlight TabControl Pin
Mohammed Issa at 9-Mar-09 4:59
memberMohammed Issa9-Mar-09 4:59 
Generaldata binding on ItemsSource Pin
Ravejones at 25-Feb-09 7:22
memberRavejones25-Feb-09 7:22 
GeneralRe: data binding on ItemsSource Pin
alrh at 11-Mar-09 2:52
memberalrh11-Mar-09 2:52 
Generalmodification: do not virtualize selected tab Pin
chefkokkie at 14-Feb-09 20:07
memberchefkokkie14-Feb-09 20:07 
GeneralWPF Chrome causes this to not work. Pin
Member 4454196 at 3-Feb-09 15:13
memberMember 44541963-Feb-09 15:13 
AnswerRe: WPF Chrome causes this to not work. [modified] Pin
chefkokkie at 11-Feb-09 21:42
memberchefkokkie11-Feb-09 21:42 
Answernon-uniform width decrease of tabs Pin
chefkokkie at 3-Feb-09 11:27
memberchefkokkie3-Feb-09 11:27 
AnswerRepeatLEFT and RepeatRIGHT are reversed Pin
chefkokkie at 2-Feb-09 17:24
memberchefkokkie2-Feb-09 17:24 
GeneralRe: RepeatLEFT and RepeatRIGHT are reversed Pin
Rolenun at 24-May-09 19:12
memberRolenun24-May-09 19:12 
GeneralWow Pin
Alomgir Miah Abdul at 26-Dec-08 7:55
memberAlomgir Miah Abdul26-Dec-08 7:55 
GeneralScrollViewer property - VerticalScrollBarVisibility="Auto" error Pin
bluemoong at 30-Oct-08 5:30
memberbluemoong30-Oct-08 5:30 
GeneralVB Translation Pin
RiccardoG at 6-Oct-08 6:16
memberRiccardoG6-Oct-08 6:16 
GeneralSet Window1's Height=Auto And Width=Auto ,there is an Error! Pin
anqincmt at 7-Jul-08 1:31
memberanqincmt7-Jul-08 1:31 
GeneralRe: Set Window1's Height=Auto And Width=Auto ,there is an Error! Pin
jutifruti at 11-Sep-08 5:57
memberjutifruti11-Sep-08 5:57 
GeneralRe: Set Window1's Height=Auto And Width=Auto ,there is an Error! Pin
Cool Cassis at 1-Oct-08 2:13
memberCool Cassis1-Oct-08 2:13 
In my personal opinion setting Height and Width to Auto makes no sense.
How should .NET guess what size the window should have? Confused | :confused:

I would simply leave Height/Width properties away. Then the Window1 uses its default size.
If desired, start/load it as maximized.

Cheers,
Christian
QuestionAutoSize HeaderWidth of TabItem Pin
Horst Klein at 17-Jun-08 3:26
memberHorst Klein17-Jun-08 3:26 
QuestionCan be used in XBAP apps? Pin
pixel3cs at 9-May-08 11:17
memberpixel3cs9-May-08 11:17 
Generalimplement data binding feature Pin
Quang Tran Minh at 16-Apr-08 1:20
memberQuang Tran Minh16-Apr-08 1:20 
GeneralRe: implement data binding feature Pin
icecreman at 18-Apr-08 5:12
membericecreman18-Apr-08 5:12 

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.150427.1 | Last Updated 5 Apr 2009
Article Copyright 2007 by alrh
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid