BKS Tab Control

Buy Now

$75.00 USD

Buy Source Code

Demo Project

BKS_TabControl Demo (463.5 KiB, 383 downloads)
Demo Requirements:
Xojo 2018 r4 (2017r1 minimum)
Mac, Windows, or Linux

Dynamic Tabs for Xojo

The BKS Tab Control is a set of classes that offer developers a classic “tabs control” for Xojo Desktop applications. The Tab Control can attach to any other RectControl or Window, and will maintain a relationship to this parent control if and when it changes size. Tabs can be displayed in one of four directions (North, South, East, West) and individually offer options like a close button, an icon, a background color, and can be disabled.

BKS Tab Control has been tested in Xojo 2018r1.1 and as far back as Xojo 2017r1, however the control may work in older versions of Xojo. Download the demo and try it out!


The BKS Tab Control control is contained in a module which makes adding it to a project very easy. Copy the BKS_TabControl module from the source project, and paste it into the destination project.

To use the control, drag the TabCanvas class from the BKS_TabControl module in the Navigator or Control Library to the interface designer. The TabCanvas can be placed anywhere on the interface designer because attaching the TabCanvas to another control will adjust it’s size and position to match the parent control.

When attaching to a Window (or to nothing at all) the TabCanvas must be placed and sized as desired for the end result. Nothing will happen automatically when there is no parent control. Consider that to the user, tabs should represent the view they are looking at; so in most cases the TabCanvas should be attached to a PagePanel at the very minimum.

To attach the TabCanvas to a control, like TextArea1, use the AttachTo method:

TabCanvas1.AttachTo( TextArea1, BKS_TabControl.Orientation.North )


Attaching the TabCanvas to the TextArea1 control will size and position the TabCanvas to match the TextArea. The desired orientation of the TabCanvas is passed as the second parameter. The directions available are four cardinal directions; North, East, South, West.

To add tabs to the control use the AppendTab method:

TabCanvas1.AppendTab( "Aardvark" )
TabCanvas1.AppendTab( "Badger" )
TabCanvas1.AppendTab( "Chimpanzee" )


The AppendTab method has an optional boolean parameter to indicate whether or not the new tab should copy the previous tab’s styling. Options like CloseBox and Icon are not included. Passing False will use the default styling instead.

Tabs can be accessed via their tab index. The tab index is zero based.

To add a close box to a tab, set its CloseBox property to the desired position. When a user clicks the tab’s close box the CancelTabClose event is raised, return True in this event to prevent the tab from closing.

TabCanvas1.Tab( 0 ).CloseBox = BKS_TabControl.Tab.DisplayOption.Left
TabCanvas1.Tab( 1 ).CloseBox = BKS_TabControl.Tab.DisplayOption.Right


To add an icon to the tab, set its IconPosition property to the desired position, and set an ImageSet to the Icon property.

TabCanvas1.Tab( 0 ).Icon = Apple_Icon
TabCanvas1.Tab( 0 ).IconPosition = BKS_TabControl.Tab.DisplayOption.Right
TabCanvas1.Tab( 1 ).Icon = Star_Icon
TabCanvas1.Tab( 1 ).IconPosition = BKS_TabControl.Tab.DisplayOption.Left


The three orientations for the DisplayOption enum are None, Left, and Right. The default value is None.



North, East, South, West


With a simple option, users can drag to rearrange tabs.


Linux Mint