MenuBar Icons

i saw that at windows 10 the menubar icons (png images 96x96 pixels) are displayed in original size.
in the ide menubar editor / preview it looks correct but at runtime they get very big. (i would say its a bug)

do you guys use real icons (in multiple sizes) with .ico extension for the menu? or just smaller images?

btw ConstructContextualMenu did not have this behavior, the icon images there resize to the menu text height.

Recently I was working on this issue for Windows too. And with help from @Thom McGrath and others, I was able to implement an icon resize Method to consistently resize icons for MenuItems. See this forum thread which includes a sample project.

The above mentioned solution “should” work for a single large PNG (not tested), but because I think the expected size of a MenuItem icon should be 16x16 pixels (at standard 1.0 resolution scaling), I work with an ImageSet of 16x16 (@1), 32x32 (@2) and 48x48 (@3) PNG images for best results.

So when you have an odd ScaleFactor like 1.40 for example, on Windows, the menu icon needs to be 22x22 pixels (roughly) which means down-scaling the 32x32 image to 22x22. When you don’t actively resize the icon (for the given ScaleFactor), then you end up with the 32x32 icon (or larger) in the menu, which then looks oversized and distorts the row heights in the menu.

Note: If there is only a 16x16 image available for an icon, then up-scaling occurs to get it to 22x22 - which gives you poorer quality compared with down-scaling a larger image. There are some screen-shot examples of up-scaling in that other thread.

If you use ImageSet’s on macOS, it doesn’t really have this problem because the ScaleFactor on macOS is usually always either 1.0 or 2.0 (or maybe even 3.0), so you don’t need to worry about the in-between sizes.

I don’t see the oversize icons as a bug myself, but rather an issue with how Windows allows ScaleFactors other than 1.0 or 2.0. And also because I’ve seen these oversized icons occasionally with other non-Xojo apps on Windows. The developer in those cases either wasn’t testing for the in-between scale sizes or didn’t think it important enough to fix.

Below is a screen-shot sample of my menu icons on Windows using a non-standard ScaleFactor.

By the way, I used Xojo 2019r3.1 for my project.

I hope that thread is helpful to you. Good luck!

[quote=494185:@Scott Cadillac][/quote]
thank you Scott for this long explanation

my current solution is to add all icons to the menubar at app open event with a picture resize method.
i used the names from images in project tree.

This is similar to what I do now as well.

But because I have multiple monitors, where the ScaleFactor is not the same on each screen, I’ve added a check to determine if a resize is needed whenever the EnableMenuItems Event is called - in case the the user has moved a window to one of the other monitors (changing the icon resize requirements).

First I add a Property to the Window:

Private Property mPreviousScaleFactor as Double = 0.0

Then some logic like the following in the EnableMenuItems Event

If Me.mPreviousScaleFactor <> Me.ScaleFactor Then // logic only runs on first call, or when the Window moves to a screen with a different ScaleFactor Var iconSize As Double = 16.0 // expected pixel size of MenuItem icons EditCopy.Icon = myModule.ImageResize(iconSize, iconSize, Me.ScaleFactor, copyIcon) EditPaste.Icon = myModule.ImageResize(iconSize, iconSize, Me.ScaleFactor, pasteIcon) // other icon assignments... // update property, for next check Me.mPreviousScaleFactor = Me.ScaleFactor End If
The above helps prevent unnecessary repeated Icon assignments, but always keeps them sized properly. And seems to work equally well for macOS & Windows.

@Scott Cadillac
oh thanks, i think i need more tests with windows scaling option and the result in the app.