Windows TabPanel Dark Mode workaround

Now that Dark mode is fully supported in Xojo, I’m sure users run into issues when trying to make a tab panel go dark. As Microsoft has oddly not created a native tabpanel that supports Dark Mode, Xojo does not support that either.
I used the following as a workaround; place a Segmented Control above the location of your TabPanel,
and in the open event, move it down to cover the original tab panel menu
In the Segmented control action, set the Tabpanel index. So you’re using it as a remote control.
If you want the backdrop of a tab panel to have a non white color, add a rectangle under all other controls on that tab, and you can set the color dynamically.
It’s not as good as a native control, but looks 100% better than using a light tab panel in Dark Mode.

If you are going to do that why not make your own using TabPanel from a SegmentedControl and PagePanel on a ContainerControl?

-karen

2 Likes

Controls on Tab panels have the wrong background in Windows 11, but this was fixed in Xojo 2021 R3, supposedly.

Is this a new issue? Does it affect Windows 10 too? Does it happen in 2021 R3 also? Some more details would be helpful, thanks!

Because a tab panel looks fine on Mac and it’s a lot of work to take all controls from a tab panel to a new control. In one app, I Use 6 tabs with dozens of controls per tab. dragging them to a new control is close to impossibl. With this workaround, I only need to add 1 control on Windows only.

It’s still a problem on both Windows 10 & 11.

It would be nice to have a keyboard modifier in Xojo (Cmd, Option, Shift, …) so that when you click to select controls with that modifier, instead of selecting the control you clicked on, you’d always get a drag to select.

In other apps, you would “lock” the base control (the Tab Panel) and then clicking it gives you a drag-to-select box rather than selecting the control itself.

Two apps that work this way are FileMaker and Pages.

Xojo has “locking” of controls, but that’s a different concept.

Another idea: right-click on a container control could have a menu option “Select all controls on this page of the tab panel”

Edit to add: in Xojo 2021 R2.1, this feature already exists. Right-click a tab panel in the IDE, and you can choose Lock Position

At that point, the Tab Panel shows a lock icon:

image

However, you can’t then click & drag to select controls inside the tab panel, so it doesn’t work like we want.

(I’m kinda amazed this feature exists, as I had no idea)

Another way it could be done: Right Clicking on a Window gives you an option to select controls:

Unfortunately, all controls on the tab panel are at the same level, so this is not helpful.

If the menu were subdivided by Pane, we could have something like this:

Select --> TabPanel -> Pane 1 -> 
                                Select All controls on Pane 1
                                Pushbutton1
                                Pushbutton2
                       Pane 2 ->
                                Select All controls on Pane 2
                                EditField1
                                TextArea1

etc.

Your ideas are valid, but I don’t think they discard mine.
If you want to select some (read: most or a lot but not all) controls in a rectangular area on a tab panel without changing its state (that is, locking the tab panel, which you may very well forget to unlock afterward, and is still an extra step), having a/some key(s) modifier(s) to select an area rather than the clicked control would be nice, IMO.

This reminds me of an old feature request that no one else seemed to care about… Bring back Shift-dragging like in previous versions of Real Studio.
<https://xojo.com/issue/50355>

You can change the “Super” from TabPanel to PagePanel and the controls will stay on the correct pages. Then you can place the segmented control above and have it control the PagePanel’s SelectedPanelIndex in the pressed event.

3 Likes

That’s a wonderful solution - exaclty what I’m trying to do.

1 Like

Great idea, that makes the transition much cleaner.

Windows provides the tools to enable devs to create owner-drawn controls that use native themes, e.g. DrawThemeBackground which automatically change with editions of windows, including Windows 11 so they don’t have to look “uncanny valley”. I don’t know why Xojo has chosen not to do this for TabPanels, autocompleting ComboBoxes, and DateTimePicker as the controls would remain native and any future visual changes would take place automatically. I just hope this doesn’t get swept under the rug and forgotten about because its “only” Windows but as there hasn’t been any information about this from Xojo then I fear the worst.

Maybe @William_Yu or @Geoff_Perlman can let us know if they are looking into this or if this will be the norm going forward? Because as it stands, these controls aren’t cross-platform and the docs don’t mention this either.

Unfortunately they’ve only updated this for controls they care about, TabPanels are not one of them, but Buttons are.

We’re still looking over our options, but for the time being this is the norm.

Odd, when I checked before I made the post above I could definitely see the difference using Theme Explorer:

1 Like

Sorry, my comment was in reference to TabPanels in Dark Mode, they haven’t updated that part of their TabPanel theme drawing.