My PopupMenu Control Project

I have a requirement for a cross-platform PopupMenu control with large text. While the Xojo Mac PopupMenu control can display large text when expanded, the control itself cannot be enlarged and doesn’t look good with a large font size, so I made my own.

While I was at it, I added settable background color, text color, highlight color, and row spacing properties, as well as independently-settable font size for the control and the menu.

Most behavior emulates the Mac control - I don’t like Windows’ use of a scroll bar in popups, and I prefer the way the Mac control opens with the selected row centered on the control.

The control also optionally offers the MacOS “wink” on menu selection and a checkmark showing the currently-selected item, which the native Windows control doesn’t have.

Unlike the Xojo Mac control, incremental text search and arrow-key scrolling work with the unexpanded control when it has focus.

An incidental specialized requirement of my application is displaying an image in a separate window via code in the MouseDown event. This works with the Xojo Mac control but doesn’t seem possible with the Xojo Windows control - the menu displays and then closes as soon as the image window opens. It works on both platforms with my control, but the “CloseOnExit” property must be selected, since the default behavior (close on deactivation) will fire as soon as the picture window activates.

The demo project can be downloaded here and is free for all to use without restriction - improvements and suggestions are welcome. No plugins are required. It’s been tested on a multi-monitor setup with side-by-side monitors of equal resolution. I expect it to work with side-by-side monitors of varying resolution, but over-under monitors maybe not so much at present.


The only negative I would say it that the arrow is wrong for a popup menu on Mac. It should point up and down. That looks more like a combobox. It also lacks the coloured background to the arrow. In case you want to duplicate the standard item with a larger font.

Cool otherwise.

1 Like

Easily customizable, just drop in a different arrow image (or select different images based on target OS) :slight_smile:

1 Like

Thank you for this appreciated share!

1 Like

Julia thanks for sharing this. I was writing my own to circumvent the Xojo/apple limitations but yours is much better.

1 Like

Others apparently do not have this problem, but I am asked for an image set that I do not have when I try to run your project.

Do you know what I am not understanding?

windows 10
I get also same issues…

I think the images are in the Zip file but they don’t get carried across if you drag or paste the folder into a new project - maybe I should put them in as string constants or something. Anyway, here they are:

There’s a bug that can cause an OutOfBoundsException with short menus - I did my testing with long menus, of course :roll_eyes:

To fix the issue, in PopupWindow HandleMouseMove, change the first line from this:

mMouseIndex = Y/RowHeight - UpArrow.Height/RowHeight

to this:

mMouseIndex = Min(Y/RowHeight - UpArrow.Height/RowHeight,rows.LastRowIndex)

As a Mac user, I rounded all the rectangles and pushed the text up a little higher in the canvas and put small gutters around the select rectangles. Made the outlines a little grayer. This just to more closely mimic the MacOS appearance. All of these modifications were easy within Julia’s code.

I am delighted by this control.

1 Like

I’m delighted that you’re delighted! :slight_smile:

1 Like

Much appreciated.

1 Like

Robert will you post a screenshot of your changes? It would be nice to another person’s idea of how the control should look.

1 Like

The corners around the pop-up are rounded. The outline is a gray rather than black

The pop-up content itself is rounded. You can see a slight “artifact” at the corner where the sharp corner of the “window” is still visible. It is not too obnoxious but I could not figure out a way to get rid of it. The “gutter” between A and the top of the popup is reduced.

Small gutters have been created so the blue selection rectangle does not extend all the way to the edge. The blue selection rectangle is itself “rounded”.



On github: GitHub - JuliaTruchsess/PopupMenuJT: Customizable cross-platform Xojo PopupMenu control

I’m a total github noob, hopefully I did it right :slight_smile:

1 Like

Thank you for sharing Julia, this is really great!

1 Like