ToolStripButton with Popup Menu?

Question

I'm doing the GUI for a paint-like program, where the user will be able to select a drawing tool from a ToolStrip. Some of these tools have variations, and I'd like the user to be able to select one via a popup menu.

Anyone familiar with the Photoshop toolbar interface will know what I'm after: the user can either click the button and start working with the selected tool, or pick one of the tools from the popup menu that appears upon click, and from that point on the button will represent that tool. Also, the button will have the Checked property set to True when that tool-family is selected.

I thought this could be accomplished with a SplitButton or DropDownButton, but these don't have a Checked property for the user to see what tool is currently selected. So I went with a ToolStripButton and a ContextMenuStrip that is shown upon click.

The problem is that since I'm taking the cursor position to show the ContextMenuStrip, depending on what part of the ToolStripButton is clicked, the popup menu might cover it partially, and it is a very unpolished look. How can I get the ToolStripButton's screen coordinates? Or is there a better (and still relatively simple) way to do this?

Answer 1

You don't say what technology you are using for the GUI. I'm guessing winforms or WPF. If you have a choice WPF may be the best long-term choice to support not just your context menu buttons but also to support the painting part of your application.

If you are using winforms, have you looked at adding a context menu to your main buttons?

Answer 2

I've implemented this sort of feature before in applications. In Photoshop, each tool has a different icon (lasso and polygonal lasso have different icons, brush and pencil have different icons). So, when using a tool strip, I use a split button. When the user selects a tool from the drop down list, you apply the selected tool's icon to the split button.

A ToolStripItem can have a background image. To show the selected item, you can simply set the background image to a solid-colored semi-transparent image (i.e. solid black with 25% transparency).

edit: It would probably be best to use a semi-transparent version of SystemColors.Highlight