Introduction
If you are reading this article, you have probably noticed that Microsoft
failed to provide a decent menu control in Visual Studio.NET. The standard .NET
Framework MainMenu and MenuItem controls are as basic as
they get.
A long search through some other articles on how to extend the features of the
.NET Framework menus, left me unsatisfied; either they used Interop and Win32 API
calls which I am trying to avoid and/or, they subclass the MenuItem which means
foregoing the menu designer in Visual Studio.NET, and hand-tooling your menu
implementation. I also found that either the code was far too simple (and
incomplete), or too complex and integrated into a large control suite that made
it difficult to pull-out just the menu functionality.
The source project included with this submission uses IExtenderProvider to
create a bridge between an ImageList control containing menu icons,
and standard MenuItem controls. The benefit is that, you can continue to design
your menus using the menu designer in Visual Studio.NET, and simply extend them to support
a MenuImage property that also takes care of the work of owner drawing your menu
items. All you need is a few drag-and-drop operations, and few property set
values and you will have fully-functional graphical menus with no-coding required.
Using the Extender
Using the MenuImage extender is as simple as it get:
- Draw your menu using the Visual Studio.NET menu designer as normal.
- Drag an
ImageList control to your form, and populate the control
with your menu icons. It is recommended that you use 16x16 transparent icons.
Although the MenuImage extender will support any image supported by the
ImageList, my implementation does not make bitmaps transparent.
- Drag a
MenuImage extender to your form. Open the properties window,
and select your ImageList control instance from the ImageList property
drop-down menu. This hooks your ImageList into the extender. Next, select
your menu items and note a new property - MenuImage. Enter the numeric
index of the image item to associate with this menu.
That's it. No coding required. When you run your application, the MenuImage
extender will retrieve the indicated image from your ImageList, and owner draw
the menu as seen above.
Owner Drawn Menus
By default, .NET Framework menus provide no image property on the MenuItem
class. To add one requires defining your own drawing and painting code and
basically rendering the menus yourself from scratch.
To indicate that you
are going to draw your own menu items, the MenuItem class provides an OwnerDraw property. By default, this property is false. To
custom draw your menus, set the OwnerDraw property to true.
NOTE: the MenuImage extender does this for you by default. If OwnerDraw is
true, then the MenuItem class raises two events that can be used to draw the
menu.
Special note: you do not need to implement a subclass of the control to have
access to these events - this is what makes implementing this functionality as
an extender possible.
The MeasureItem event is used to calculate the height and width of the
canvas required for the control. This event is raised prior to DrawItem. The
primary activity is to set the ItemHeight and ItemWidth properties to the
correct size.
private void OnMeasureItem( Object sender, MeasureItemEventArgs e )
{
MenuItem menuItem = (MenuItem) sender ;
MenuHelper menuHelper = new MenuHelper( menuItem, e.Graphics, _imageList ) ;
e.ItemHeight = menuHelper.CalcHeight() ;
e.ItemWidth = menuHelper.CalcWidth() ;
}
The DrawItem event is used to actually perform the drawing. The event
argument provide the state (selected or not), the bounds of the canvas, and
even provide a graphics object to do the painting.
private void OnDrawItem( Object sender, DrawItemEventArgs e )
{
MenuItem menuItem = (MenuItem) sender ;
MenuHelper menuHelper = new MenuHelper( menuItem, e.Graphics, _imageList ) ;
bool menuSelected = (e.State & DrawItemState.Selected) > 0 ;
menuHelper.DrawBackground( e.Bounds, menuSelected ) ;
if ( menuHelper.IsSeperator() == true )
menuHelper.DrawSeperator( e.Bounds ) ;
else
{
int imageIndex = this.GetMenuImageIndex( sender ) ;
menuHelper.DrawMenu( e.Bounds, menuSelected, imageIndex ) ;
}
}
These are the basics behind owner-drawn controls in general. To keep the main
extender class code simple, I encapsulated the actual menu drawing and painting
features in a separate MenuHelper class. More details on the actual
implementation of the drawing and painting can be found by reviewing the sample
project source code.
Points of Interest
Since adding an image requires changing the default offsets for menu text,
you cannot mix and match owner-drawn menu items with non-owner drawn menu items.
It's an all or nothing deal. Part of the complexity associated with this type of
code is related to having to handle separators, non-graphical menus, menu
shortcuts, sub-menus, etc., selected vs. non-selected menu items, and enabled and
disabled states.
The code does not directly call any Interop or Win32 API
functionality. In fact, once I started digging, I found that .NET provides a lot
of functionality that allowed me to keep my code footprint relatively small - it
is just seeded around a lot of different classes. A special thanks goes to the
various authors noted in my acknowledgements. Many of the hidden tricks I have
used were pulled from their various articles.
Final Notes
I developed these extensions to support the standard Windows style menu
design versus the new XP/Office style menus for a number of reasons:
- I am not as google over the XP style menus as some people. I find the
typical style menu does the job and is visual appealing. A particular
advantage is that it allowed me to use standard system colors and fonts,
which means the menu is more likely to adapt correctly to different desktop
themes with no extra coding on my part. The XP style menus require doing
special color blending that adds complexity. For those intent on having the
XP style functionality, it would not take much effort to support XP style
menus. I may consider adding
a
MenuStyle property that allows the user to select either standard or XP
style menus in future revisions.
- Using standard Window style menus means I do not have to draw the
top-level menus. Again, this would not be that hard to change if you really
wanted XP style menus, but it would mean having to add some additional code
to also detect and paint top-level menu items.
History
- November 24th, 2002 - Initial Submission
Acknowledgements
I drew from a number of different articles by various authors. I would
like to acknowledge their indirect contributions as follows:
