Skip to content

Building a Dark Mode Capable “TabPanel”

Xojo supports dark mode in most of the Desktop controls. However, the TabPanel control doesn’t yet support dark mode. But you can make an alternative that works with dark mode. I use a SegmentedButton and a PagePanel to overcome this and in the blog post, I’ll show you how.

Let’s get started by creating a new Desktop project. We’ll add two colour groups, one for the border which we’ll name Border, choosing Named and selecting Active Border from the menu.

The second is for the background which we’ll name Background, choosing Named and selecting Window.

Now add a ContainerControl to the project and call it myTabpanel. Set its background colour to background.

Next add a SegmentedButton to the top left corner of the container.

In the Inspector for the SegmentedButton edit the segments.

Set the first segment as selected.

Now add a rectangle and set its left position to 0 and its top position to 24 (the height of the segemented button) and drag the bottom right corner to fit the container.

Lock its bottom and right boundaries.

We’ll now set its border colour to border. This will provide the outline of the panel.

Now we’ll add a PagePanel to the project to fit just inside the rectangle. Set its Left position to 1 and its Top position to 25. Its Width and Height should be 2 less than the rectangle – let the Xojo IDE do this for you.

and

on moving away from the field the IDE will replace the entry with the result. Again, we’ll set the border locks for bottom and right.

Next, we’ll set the code for the Pressed event on the SegmentedButton.

Sub Pressed(segmentIndex as integer) Handles Pressed
  PagePanel1.SelectedPanelIndex = segmentIndex
End Sub

This will change the panel each time a button is pressed.

Now we’ll add a PanelChanged event to the container.

And name it PanelChanged. We’ll now implement the PanelChanged event on the PagePanel:

Sub PanelChanged() Handles PanelChanged
  RaiseEvent PanelChanged
End Sub

Which will passes it along to the new PanelChanged event on the container.

Wayne Golding has been a Xojo developer since 2005 and is a Xojo MVP. He operates the IT Company Axis Direct Ltd which primarily develops applications using Xojo that integrate with Xero www.xero.com. Wayne’s hobby is robotics where he uses Xojo to build applications for his Raspberry Pi, often implementing IoT for remote control.