Using ToolStrip as a TabControl Alternative in Windows Forms

I've been going back and forth lately with Karl Erickson, another member of our team, and the guy who owns the TabControl docs. It appears that my gripes with TabControl weren't mine alone. He's been fielding reports of various weird bugs, such as the visual styles weirdness and the funky way TabControl handles layout at run time. Basically, the darn thing isn't meant to have its tab layout order changed at run time; properties like Alignment are best set at design time, and then kept like that for the life of your app.

So, yes: it's possible to hack up TabControl to make right-aligned and left-aligned tabs work.

Or, you can use ToolStrip instead.

Picture 1: ToolStrip Tab Imitator

The idea is simple. Add a SplitContainer to your form. Make one panel the "nav" panel, and the other the content panel. (You could just Dock it Left, but using SplitContainer makes it easier to resize. And yes, I know that ToolStripContainer exists - I'm still trying to force it to do my bidding.) Add a ToolStrip to the nav panel and set it to Dock=Full. Add image and text for each of the buttons, and use the following settings on each button:


For the panels themselves, you can develop separate UserControl classes, and switch between them whenever a user clicks a button. You can incorporate interfaces onto the UserControls to test if there is any data that needs to be persisted before switching tabs. E.g., if you're on the Pay Bills tab, and the user has unconfirmed bill payments, you might want to prompt to confirm or discard the transactions.

Here's another screenshot of a rinky-dink app I've been using as a testbed. I haven't written any of the panels yet, so there's a big gaping hole in the middle there, but this shows how to do the same thing using larger, more stylized buttons on the right hand side. These use .TextImageRelation=ImageBeforeText to make them work. Also, the RenderStyle of ToolStrip is set to System, and the BackColor to White to blend in with the buttons. (Don't attempt to use TransparencyKey when using complex images.) 

You'll have to forgive the app's slight klunkiness; I've hacked it to bits recently. And yes, that is a ToolStrip control I'm using as the title bar!

Picture 2: Right-Aligned Buttons

The benefits of this approach are numerous. Because you're using ToolStrip, you can use features like drop-down buttons, embedded ComboBoxes, fly-out menus, context menus, etc. ToolStrip is a great "kitchen sink" control that's been designed to do just about anything. It has a modern look and feel by default; you can make it very slick without writing a lick of code. If the built-in renderers don't meet your needs, however, never fear: ToolStrip can be stylized out the wazoo using a custom renderer.