Getting huge icons in Toolbar on Windows - how to fix?

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.

What do you expect…? ToolButton has no Events :slight_smile:

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 :slight_smile:
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?

I use Xojo’s toolbar when I want big playschool buttons and there wont be many on the toolbar.
For more flexibility, I use KillerToolbar

Yes - have a look at the ScreenShot here. The “Undo” Toolbutton is disabled.

KillerToolbar looks useful. I should have asked sooner :slight_smile:

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…

The screenshot that you linked to shows the Undo arrow fully black, though, don’t you agree? It should rather look grey, like the text below it.

Ah - now I get it. Yours is originally blue, and Windows changes it to black. Which doesn’t work when the original is already black.

So I have to change my icon to use color, or replace the icons. Sneaky.

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