Deluxe Tab Strip ActiveX Control

Deluxe Tab Strip
VB ActiveX control, April 2002

The Deluxe Multi-line Tab Strip from Merlin's Software is a custom control, with which you can make all sorts of tabbed dialog boxes. Packed full of exactly those features a programmer needs!

Below, you see a picture of a tabbed dialog. The dialog contains just a single text box which shows the highlight and click events.

The tab strip background is a soft gradient. Various gradients, a picture or transparency are possible.
The tab captions use light etched lettering, the icons are etched too. Tab 1 is selected, Tab 2 is highlighted.
The tabs use a "classic tab style", with a tab overlap of 8 pixels
The icons are supplied by a normal VB ImageList control.
Please check out the full list of interesting properties below!

Special offer! The Deluxe Tab Strip control comes complete with the deluxe flat button control, at a package price of USD 40 or EUR 40. All with source code and small sample programs. You can use the deluxe button (panelstyle) control to group other controls for each tab. The panel can be opaque or transparent, a gradient or a picture, or it can be "invisible", i.e. let the tab control background show through.

If you buy the ActiveX control, you will get the complete source code too, so you can enhance the control further if you like. The control plus source comes in a ZIP file as an e-mail attachment (sorry, no disks, CD's floppies or snail mail!). So don't forget to fill in your email address!

Users in the Europe can send EUR 40 in cash, or transfer the money to AMRO bank account 45.64.08.401 of Merlin's Software, Zeist. Users abroad can send cash (USD / EUR only), or pay by credit card using the PayPal button above. You can buy the Deluxe Button control separately for USD 25, and you can buy the Deluxe Tabstrip control separately for USD 25. Please email me if you want the Tabstrip separately.

Download a trial version You are welcome to download a trial version of the Tab Strip control (100 kB). This is just the OCX, no source code. It has a small message box reminding you that it is a trial version. Please use this page as the documentation.

msyTabStrip Properties Here is a list of the important special properties of the control. Common properties, such as Enabled, Tag, Visible and so on, are available as well of course.

Backstyle

Transparent: The bitmap of the container (form or msyButton control or picture box) will be copied. Make sure that the container's Autoredraw property is set to True and that it has a hDC property, or there will be nothing to copy and you will get very weird backgrounds! (This always applies, because the area between the tabs is copied from the container!) Opaque: the Gradient, Picture or BackColor property will be used, in that order.
Please note: In design mode, if you move the control, the background behind the control or the transparent image is not updated automatically. It will be, as soon as you change another property that will redraw the control.

Borderstyle

FlatBorder: no border.

FaintBorder: a faint single line border

SoftBorder: a normal single line border

EtchedBorder: an etched-look border

RaisedBorder: a thick border

SunkenBorder: a thick inset border
SoftSunkenBorder: a soft inset border
Single Border: a single dark line

Caption3D

Normal: flat caption Etched: light inset caption Embossed: light raised caption

Sunken: a heavy inset caption, suitable for larger fonts
Raised: a heavy raised caption, suitable for larger fonts

CaptionPadding

Pixels of padding to the left and right of caption-plus-icon on each tab

CaptionVisible

Show or hide all tab captions

Gradient

This sets whether a gradient is shown. If set to False, the Picture will be shown on the control, or the BackColor if no picture is available. BackStyle must be set to Opaque.
The Gradient is only drawn on the internal Picturebox object when a gradient setting changes, the control is resized or the Picture property is changed. For all normal control redrawing the persistent internal gradient or tiled picture is simply copied to the screen.

GradientColorStart, GradientColorEnd

The start and end colours of the gradient

GradientType

Select a horizontal, vertical or diagonal gradient.
Please note: the diagonal gradients can take a long time to draw. If you need large areas with diagonal gradients, then create a control of the correct size, and use the Alt-PrintScreen key combination to copy the current screen to the clipboard. Process the diagonal gradient on the clipboard further in a paint program, to convert it to a bitmap, which you can later load as the Picture property of the control. This will greatly speed up control rendering.

Highlightcolor

Colour for the tab caption if the mouse is over the tab.

hDC

Available in code. For more info see the Image property.

hWnd

Available in code

Icon

The icon for the tabs in design mode. Must be an icon. Any size supported. Will extract the default icon from a multiple-size icon file. The icons for each tab are set in code when the tabs are made, and are supplied by an ImageList control. The design mode icon gives you a chance to evaluate other properties in design mode. Remove it before shipping an application - it is not used at run time.

Icon3D

Normal: flat icon Etched: light inset icon Embossed: light raised icon

Sunken: a heavy inset icon, suitable for larger icons
Raised: a heavy raised icon, suitable for larger icons

IconVisible

Show or hide all icons on all tabs

Image

The Image property is a reference to an internal Picturebox which contains the gradient or the source picture. You can draw on this using Windows API drawing methods and the hDC property. The resultant image is used when BackStyle = Opaque, to fill the control internal area.
The image is cleared whenever a gradient setting is altered, the control is resized or the picture property is changed. To make the image truly persistent, use the code "Set .Picture = .Image: .Gradient = false". Now changes to the gradient or the control size will no longer erase the image.
The tabs, captions and icons are not drawn on the Image property.

ImageList

In code only: Set the image list which contains the icons to use for the tabs.

Picture

Background picture for the control. Will only show if BackStyle is set to Opaque and Gradient = False. (Bitmap, icon, metafile, GIF, JPEG).

PictureAlign

The position of the picture on the control: top left, top right, bottom left, bottom right, centered, tiled, stretched.

SelectedColor

Colour for the selected tab

SelectedItem

The currently selected tab (available in code only). The Recalculate method will re-load the SelectedItem by Index, and set it to nothing if the SelectedItem has gone out of scope.

Style

ModernTabs: Square tabs, possibly with a 45 degree corner
ClassicTabs: Slanting-edge tabs, as shown above, possibly with 60 degree side / corner.

TabCorner

The corner size of the tabs in pixels (either style)

TabOverlap

The amount in pixels by which tabs overlap each other. A negative value creates room between tabs.

TabsHeight

The height of the area available for tabs, in pixels. If there are more tab rows than there is room, remaining tabs will not be shown, untill they cycle into view when the selected tab is on another row. Default height with MS Sans Serif font and 16 pixel icons is 18 pixels per row.

TabStop

Set this to true if the tabs should be accessible by keyboard. A focus rectangle will show on the selected tab, and the left and right arrow buttons will cycle through all tabs. Set it to false to disallow the focus rectangle. The AccessKeys will work in all cases.

msyTabStrip methods

Recalculate

This is called automatically whenever things like font or size or borderstyle change or when the control is resized and so on. Call it manually after you have added or removed tabs and before you call Refresh. This routine will also re-load the current SelectedItem by Index, to make sure any changed properties of the current tab will be visible on screen. If the Index does no longer exist, SelectedItem will be set to Nothing. This will look on screen like none of the tabs is selected - they are all behind the front card without a tab.

Refresh

This method will repaint the complete tab strip. To force redrawing of the Gradient or tiled picture itself, or to clear whatever you drew manually on the hDC, toggle the gradient off and on (see also the Image property).

msyTabStrip.Tabs(Index) properties

Caption

The tab caption

Enabled

Whether the tab is enabled

Description

A string for a description of the tab's function for the status bar.

Icon

The related ImageList icon key or index for the tab. Set it to Null to no longer use an icon for this tab only.

Index

The tab index

Key

The tab key with which to specify a tab (or use the index). If the key is not set, "keyNNN" is used, where NNN is the index of the tab.

StartNewStrip

This will make sure that the tab will be the first on a new row of tabs

Visible

Whether this tab is visible

msyTabStrip.Tabs methods

Add

Add a tab to the end of the row.

Clear

Clear all tabs prior to re-loading them

Count

Return total of tabs

Item

Generic placeholder to access tab objects

Remove

Remove the given tab

Rows

Return the amount of tab rows (valid after .Recalculate has been called)

Note: Use .Recalculate and .Refresh when tabs are added or removed or made in/visible when you have made all necessary changes - these two routines are not called by the methods listed above!

Colours

The control uses soft default colours for borders, etching / embossing etc. These are almost white and dark grey and derivatives. This brings the control in line with most modern toolbar styles.

Events

These events are raised once all the drawing of the control is complete.

Highlight (bHighLight As Boolean)

This event occurs when the mouse moves over a tab or away, and the status changes from not highlighted to highlighted or v.v. You can use this event to display the Description property in a status bar, or clear it again.

Click

This occurs after the tab has been pressed and has become the selected tab.

Notes

AccessKeyPress

Pressing the access key (i.e. the key with the letter following the "&" in the Caption) will fire the Click event only.

Focus rectangle

A Focus rectangle will show only if TabStop = True, when the tab strip has the focus. If Tabstop = False, the current active control will keep the focus when a tab is selected with the mouse.
If the tab is selected with an access key (like the "f" in "&File"), and TabStop = False, the focus will be passed on to the next available control in the TabIndex sequence.

Sample code This is typical code to set up a tab strip in your Form_Load routine. It assumes you have a string array with tab captions, [optionally] a string array to identify the icons in your ImageList1 by number or by name, and [optionally] a string array of tab descriptions to show in the status bar of your program when the Highlight event is triggered for a tab. (The light blue text is optional code).

With msyTabStrip1
Set .ImageList = ImageList1 'Reference for all the icons for the tabs
For n = 1 To 10               'Add some tabs
    .Tabs.Add sTabCaption(n) , sIconKey(n), sDescription(n)
Next
.Tabs(4).Enabled = False      'Access a tab's properties like this
.Recalculate                  'Make sure all positions and rows are correct
.SelectedItem = .Tabs(1)       'Select the wanted default tab
'This will do an internal .Refresh to draw everything and raise the Click event
'In the Click event you can show the correct frame with controls for this tab etc.
End With

Other code in your form will be in the msyTabStrip1_Click event, to show the correct panel with controls for this tab, and in the msyTabStrip1_Highlight event, to show or erase the .Tabs(Index).Description in your status bar. And that is all.