Tab Controls with Hidden Tabs

I recently came across an interesting technique that I haven't used myself, but found intriguing: hiding the tabs on a tab control.

Here's the example, which comes from my favorite open source Access project: Adam Waller's msaccess-vcs-addin.

The above screenshot shows two views of a single form object.

The form object includes a tab control with hidden tabs. When the "Advanced Options..." checkbox is checked, it switches tabs to the "Advanced Options" interface shown on the right. When you uncheck the box, it switches back to the simpler "Install Add-in" interface.

While the above form includes a check box to let the user explicitly switch between tabs, this technique could also be used to select a tab based on the value of a field or some other condition.

Managing the Design Environment

One downside of hiding the tabs for the user is that it also hides the tabs in design view:

When the tabs are hidden in design view, the only way (that I'm aware of) to switch to a different tab is to choose it from the Property Sheet dropdown. Be mindful that the technical term for a single tab in a tab control is a "page". Thus, the default name for each individual tab will be "PageXX".

Here's how we can switch to the advanced tab with tab visibility turned off:

Now, as with any form control, the tabs can be renamed to something more meaningful. That will make them easier to identify in the dropdown.

However, I like Adam's approach to this problem even better.

Hiding the Tabs on Form_Load

Adam keeps the Style for his Tab Control set to "Tabs" in Design View, but then sets it to "None" when the form loads.

Here's the form at design time:

And here's the code in the Form_Load() event:

Private Sub Form_Load()

    Const STYLE_NO_TABS As Integer = 2

    ' Change install type tab control to no tabs and no border
    tabInstallType.Style = STYLE_NO_TABS
    tabInstallType.BorderStyle = 0

For the other values of the .Style and .BorderStyle properties above, refer to their respective help pages:

While Adam explicitly sets the BorderStyle to 0 (i.e., transparent) in his code, I don't think that's as crucial as setting the tab control's Style property. If you set the "BorderStyle" to "Transparent" in Design View, the tab control's border remains visible as a solid line in Design View, but disappears when switching to Form View. In my view, there's little benefit to setting that property in code, but I could be missing some other consideration.

The reason the behavior is different for the border style and the tab/button style is that changing the border style does not affect the size of the control. One of the other potential benefits of setting the tab control Style to "None" is that you can reduce the size of the tab control to reclaim the space at the top that the tabs/buttons normally occupy. If those tabs/buttons were automatically displayed at design time, this potential benefit would be lost.

Reader Use Cases

Have you used tab controls with hidden tabs in any of your applications?

If so, how did you use them? What was the benefit? Was it worth the effort? Do you have any advice, tips, or tricks for other readers?

Let us know in the comments below.