I want to provide hi-res icons for my Toolbar ToolButtons. So I make them 64x64. When I run my app on macOS, they get automatically rescaled to 32x32 and look fine on both normal and hi-dpi screens.
On Windows, however, the same icons appear as huge 64x64 buttons in the toolbar. How do I make them fit into the intended size such as 32x32), in a way that works with both normal and hi-res screens on Windows?
Do I have to write my own code for that, or is there a trick to make this work the same way it works on macOS?
If I try to reduce the sizes of the icons in the Toolbar’s Open event, by replacing them with smaller versions, this doesn’t even work - the toolbar keeps the icons at their original (64x64) size. So I have to start with no icon set, and only set them up once the code runs, it appears.
Is there any alternative toolbar library I could use that works on both Mac and Windows (Linux would be nice, too), and that’s working better, and may also give me more control over the appearance?
Jeez, the entire Toolbar handling is so wrong in the IDE. While I can subclass a ToolButton, it offers no events, not even Open(). And overwriting its Constructor is not doing anything, either. And if I add a property, and set it to being shown in the Property Editor (Inspector), it will ignore those settings as well. As if the entire Toolbar code has been written by some alien who had no concept of how the IDE and Controls should work, it seems to me. And that’s not only wrong in the old RS IDE, no! The Xojo IDE has the very same issues.
I create the (subclassed) ToolButtons in Code, and assign the Buttons to the Toolbar in Code (nothing in the IDE’s Layout Editor)…
And I use a Subclass of Toolbutton
The following works for both REAL Studio 2011 and Xojo 2017:
#if TargetWin32 then
oIconToUse = (a 24x24 Icon)
#if (RBVersion >= 2016.01) then
if App.SupportsHiDPI then
Dim pa() As Picture
pa.Append(a 24x24 Icon)
pa.Append(a 48x48 Icon)
oIconToUse = New Picture(24, 24, pa)
end if
#endif
#elseif //other Targets
#endif
me.Icon = oIconToUse
Ahh, I had not realized about being able to add multiple versions of an image to a Picture object. I know this is possible with OS level images such as NSImage, but didn’t notice it being added to Picture.
One more problem I noticed: When I check the “Hi-DPI”-Option in the 2017r2.1 IDE, then the toolbar images end up with a white background, i.e. they’re missing their transparency. Without HiDPI, it works. No idea yet how to work around that issue, now.
This is not happening with the .png’s we’ve added to our projects… Transparency is just fine in both IDE and built Application. And when opening/editing the Images in “paint.net” (e.g. to make sure they’re 72DPI).
Thanks for all the help. The mask issue went magically away, too, after I adopted your code.
One problem left:
If a ToolButton is not enabled, its title shows disabled (lighter grey) but the button image keeps showing as if it’s enabled. On macOS, disabled icons render lighter. Do your icons appear disabled when their Enabled property is false?
KillerToolbar looks useful. I should have asked sooner
Jürg - that screenshot shows exactly the issue I’m seeing: The text is disabled but the icon is not. That’s not “good”, at least not in my case where I use monochrome icons. I guess I’ll have to create my own disabled icons and replace them when I change the Enabled property. Sigh.
Oh, what would be a “disabled Icon”?
Ours is no longer blue, but gray (and that seems “disabled” to me) - and I assume that either Xojo or Windows is handling that…
It looks like a dark gray to me. But I agree with you, that the difference in color between black and that “dark gray” is too little to be noticed as “disabled”.
So I guess yes - if you want to go with the system’s behavior and Toolbar, then one should also have icons in some sort of what the system expects (or is designed for). And for an own custom design, an own custom Toolbar might be more appropriate…
Anyway - one last piece of information about the ‘native’ Toolbar (I know it has nothing to do with Windows and the OP): I don’t like that some Linux distributions place the captions alongside the Icon (rather than below, such as macOS and Windows) by default. With more than just a couple of Buttons, there isn’t enough space to fit them all.
If that’s an issue for you, too - then I can post a Declare we’re using to change the Toolbar-Style on Linux.
Oh, I had not even looked at Linux, yet, though I will have to, eventually. So yes, if you can share how you solve the text placement on Linux, I’d appreciate that.
Here you are… Put this in the Toolbar’s .Open-Event:
#if TargetLinux then
#if (RBVersion >= 2017.02) then
'GTK3
Soft Declare Sub gtk_toolbar_set_style Lib "libgtk-3" (handle As Integer, iStyle As Integer)
if (not System.IsFunctionAvailable("gtk_toolbar_set_style", "libgtk-3")) then return
#else
'GTK2
Soft Declare Sub gtk_toolbar_set_style Lib "libgtk-x11" (handle As Integer, iStyle As Integer)
if (not System.IsFunctionAvailable("gtk_toolbar_set_style", "libgtk-x11")) then return
#endif
try
const GTK_TOOLBAR_ICONS = 0 'Buttons display only icons in the toolbar.
const GTK_TOOLBAR_TEXT = 1 'Buttons display only text labels in the toolbar.
const GTK_TOOLBAR_BOTH = 2 'Buttons display text and icons in the toolbar.
const GTK_TOOLBAR_BOTH_HORIZ = 3 'Buttons display icons and text alongside each other, rather than vertically stacked
gtk_toolbar_set_style(me.Handle, GTK_TOOLBAR_BOTH)
catch err As FunctionNotFoundException
'ignore
end try
#endif
