Click here to Skip to main content
15,860,972 members
Articles / Programming Languages / XML

Menu Images using C# and IExtenderProvider - A Better Mousetrap!

Rate me:
Please Sign up or sign in to vote.
4.91/5 (87 votes)
24 Nov 20025 min read 395K   1.2K   188   64
How to extend the standard menus to support icons using IExtender in C#

Sample Image - MenuImage.jpg

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 gets:

  • 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.

C#
private void OnMeasureItem( Object sender, MeasureItemEventArgs e )
{
    // retrieve the image list index from hash table
    MenuItem menuItem = (MenuItem) sender ;

    // create a menu helper to actually do the menu drawing/painting functions
    MenuHelper menuHelper = new MenuHelper( menuItem, e.Graphics, _imageList ) ;

    // calculate the menu height and width
    e.ItemHeight = menuHelper.CalcHeight() ;
    e.ItemWidth = menuHelper.CalcWidth() ;
}

The DrawItem event is used to actually perform the drawing. The event argument provides the state (selected or not), the bounds of the canvas, and even provides a graphics object to do the painting.

C#
private void OnDrawItem( Object sender, DrawItemEventArgs e )
{
    // derive the MenuItem object, and create the MenuHelper
    MenuItem menuItem = (MenuItem) sender ;
    MenuHelper menuHelper = new MenuHelper( menuItem, e.Graphics, _imageList ) ;
            
    // draw the menu background
    bool menuSelected = (e.State & DrawItemState.Selected) > 0 ;
    menuHelper.DrawBackground( e.Bounds, menuSelected ) ;

    // if the menu is a seperator, then draw it otherwise, draw a normal menu item
    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

  • 24th November, 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:

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.

A list of licenses authors might use can be found here.


Written By
Web Developer
United States United States
Chris Beckett has been contributing to the analysis, design and development of distributed enterprise-level business systems for more than 16 years, with more than 10 years in a technical leadership role. He has delivered systems in the government, banking, broadcasting, entertainment, manufacturing, and finance industries.

Chris Beckett continues to be an active .NET architect, designer and developer, and a strong advocate for best practices in Quality Assurance and Lifecycle Management.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Md. Marufuzzaman27-Nov-11 8:11
professionalMd. Marufuzzaman27-Nov-11 8:11 
GeneralGood Job Pin
Nueman9-Feb-11 16:21
Nueman9-Feb-11 16:21 
Generalcode Pin
shyleja7-Dec-07 20:04
shyleja7-Dec-07 20:04 
QuestionWhat about .NET Compact Framework? Pin
kilarin1-Dec-06 12:11
kilarin1-Dec-06 12:11 
Generalcommercial usage Pin
tianzj26-Jun-06 18:10
tianzj26-Jun-06 18:10 
GeneralRe: commercial usage Pin
Chris Beckett26-Jun-06 19:11
Chris Beckett26-Jun-06 19:11 
Generallong menu not taking all the screen height Pin
joebarthib4-Dec-05 22:47
joebarthib4-Dec-05 22:47 
Generalsystem tray context menu not showing Pin
Me23323225-Oct-05 7:07
Me23323225-Oct-05 7:07 
GeneralRe: system tray context menu not showing Pin
sandu200419-Nov-05 6:56
sandu200419-Nov-05 6:56 
QuestionRe: system tray context menu not showing Pin
ykrylov19-Feb-07 7:41
ykrylov19-Feb-07 7:41 
QuestionMenu items stop to appear after removal Pin
BorsukWro2-Oct-05 2:20
BorsukWro2-Oct-05 2:20 
AnswerRe: Menu items stop to appear after removal Pin
tortoise20058-Apr-09 20:53
tortoise20058-Apr-09 20:53 
Generalwhy does _menuItem.IsParent becomes true [modified] Pin
bebangs30-Aug-05 19:36
bebangs30-Aug-05 19:36 
GeneralInaccessible due to Protection Level Pin
Edward Garson9-Aug-05 6:40
Edward Garson9-Aug-05 6:40 
Generalmy experiences Pin
mylitziname14-Jul-05 4:02
mylitziname14-Jul-05 4:02 
QuestionHow to create Menubar in MDI Frame ? Pin
JohnNguyen13-Apr-05 2:12
JohnNguyen13-Apr-05 2:12 
AnswerRe: How to create Menubar in MDI Frame ? Pin
ECAdam23-Nov-05 3:08
ECAdam23-Nov-05 3:08 
Generalbug in MenuHelper.CalcWidth Pin
jviveiros12-Apr-05 2:55
jviveiros12-Apr-05 2:55 
GeneralRe: bug in MenuHelper.CalcWidth Pin
jviveiros12-Apr-05 23:00
jviveiros12-Apr-05 23:00 
GeneralRe: bug in MenuHelper.CalcWidth Pin
rcsuddeth26-Apr-05 8:54
rcsuddeth26-Apr-05 8:54 
GeneralRe: bug in MenuHelper.CalcWidth Pin
jviveiros27-Apr-05 23:16
jviveiros27-Apr-05 23:16 
General32 bit icons on the menu. Pin
rossie23-Mar-05 13:33
rossie23-Mar-05 13:33 
GeneralRe: 32 bit icons on the menu. Pin
mjb25-Jul-06 22:46
mjb25-Jul-06 22:46 
QuestionHow Can I get the MenuHelper ? Thanks! Pin
c1c_c1c6-Mar-05 15:47
c1c_c1c6-Mar-05 15:47 
Generalstep by step tutorial Pin
jemmerson14-Feb-05 18:55
jemmerson14-Feb-05 18:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.