Tabs with a ToolStrip
I’ve been working on a little text editor project recently and wanted a tabbed list of documents (ala Firefox). I found a couple free solutions on the web including a project on The Code Project, but I thought I could do one better. It occurred to me that it wouldn’t take much work to customize a ToolStrip to look and behave like tabs. Why make my own tab control when there already exist one you ask? Call me picky, but I’ve never like the TabControl that ships with .NET. I find it a little clunky. I also don’t like the look of the tab pages or that I have to place everything I want in the tab within a tab page. What I wanted was a control that was just the tabs and would let me decide what to show based on the tab selection events, and not the extra bloat that goes along with the TabControl. Yes I could just reduce the size of the TabControl so that only the tabs were showing but I’m not comfortable with the idea of hiding a big portion of the control just to show the part I wanted.
I’m happy to report that my little experiment is working perfectly! After setting a number of built-in properties on the ToolStrip and ToolStripButton to make them behave a little more like tabs it was simply a matter of creating a custom ToolStripRenderer to give it the appearance of tabs. That was also a breeze using the VisualStyleRenderer to give them the XP theme style of tabs.
To get the entire tab experience I wanted I also added the little close button on each tab just as Firefox does. In fact, for the time being I’m using the same graphics that Firefox does (extracted from the classic.jar theme file that comes standard with the installation). This was achieved by rendering the little “x” close button with the custom ToolStripRenderer I made and handling clicks, mouse overs, and such from the events on the ToolStripButton.
The final bit of functionality comes from the “overflow” button usually found at the right edge of the tab strip and shows tabs that don’t fit on the screen. I ditched the built-in overflow button because I wanted the drop down to show all the currently open documents and not just the ones that ran off the screen. So I turned off the default behavior by setting the CanOverflow property of the ToolStrip to false and adding my own button with the properties Alignment = ToolStripItemAlignment.Right and Overflow = ToolStripItemOverflow.Never. This pins it to the right side of the tabs and I can add my own items to the drop down list.
I finished it all up by adding some basic rendering for the “classic” Windows style so people who don’t care for themes can use it to and by placing all the code in some objects derived from ToolStrip, ToolStripButton and ToolStripRenderer.
The included pictures speak a thousand words and if you’re interested I threw the code in a zip file for anyone to look at. The code is well commented but I should point out that there may be one or two dependencies to my own project (such as images in the project resource) but it should be enough to get anyone going who wants to make there own tab strip.
Source Code
- TabStrip.zip (5.05 KB)