Make a TabControl with Images on the Tabs

Visual Basic 2005 (vb.net)

VB 2005 has a really useful tab control that is easy to use and configure. I have used this component a lot, and I have worked out how to do a large number of useful things with it. The simplest part is adding, removing or changing the order of tabs. A more adsvanced configuration is to put images on the tabs rather than just words, and to change the orientation of the tabs. This article covers how to do these two things.

How to put images onto a tab

Your tab control will always have more than one tab, and therefore require more than one image. VB uses the ImageList component to store the images that are used on the tabs. This is a good idea because it keeps all the images for one tab control stored in a convenient central location. (ImageList is found in the Components section of the Toolbox).

So, add a tabcontrol to yor page, and then add an ImageList. An Imagelist is not a visual control, it is a component that appears below the form in design mode, but is not shown to the user at run time.

You should now add the images to the ImageList. To do this, right click on the ImageList and select "Choose Images". Add the images one at a time, and assign each one a descriptive name so that you can rfer to it easily. Each image that you select will be imported into your solution. It is also possible to configure the image sizes and Bit Depth at this stage.

Next, in the properties of the TabControl, assign the ImageList property to be the ImageList component that you added to the form.

Next, go to each TabPage in turn and set either the ImageIndex or ImageKey property to point to the image you want to use from the ImageList control. Resizing the tabs themselves is usually required at this point.

Each TabPage additionally has a Text property, and you can remove this text to just have the image displayed, or use the text so that the text appears next to the image. I wanted my texts to appear below my images, but I could find no way to achieve this :-(

Changing the orientation of the tabs

Another useful thing to do, sometimes, is to change the Alignment property on your TabControl so that the tabs appear either on the left, bottom or right of the form, rather than along the top. I think that Bottom may sometimes be useful, but Left seems like a logical choice sometimes. Remember though, most users will expect tabs to be along the top.