Click here to Skip to main content
Click here to Skip to main content

Menu Images using C# and IExtenderProvider - a better mousetrap!

, 24 Nov 2002
Rate this:
Please Sign up or sign in to vote.
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 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 )
{
    // 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 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 )
{
    // 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

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

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

Share

About the Author

Chris Beckett
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 PinmvpMd. Marufuzzaman27-Nov-11 9:11 
GeneralGood Job PinmemberRockingDownTheHighway9-Feb-11 17:21 
Generalcode Pinmembershyleja7-Dec-07 21:04 
QuestionWhat about .NET Compact Framework? Pinmemberkilarin1-Dec-06 13:11 
Generalcommercial usage Pinmembertianzj26-Jun-06 19:10 
GeneralRe: commercial usage PinmemberChris Beckett26-Jun-06 20:11 
Generallong menu not taking all the screen height Pinmemberjoebarthib4-Dec-05 23:47 
Generalsystem tray context menu not showing PinmemberMe23323225-Oct-05 8:07 
GeneralRe: system tray context menu not showing Pinmembersandu200419-Nov-05 7:56 
Hi,
 
I have the same problem, did you find a solution?
 
thnx
QuestionRe: system tray context menu not showing Pinmemberykrylov19-Feb-07 8:41 
QuestionMenu items stop to appear after removal PinsussArthur Winiczenko2-Oct-05 3:20 
AnswerRe: Menu items stop to appear after removal Pinmembertortoise20058-Apr-09 21:53 
Generalwhy does _menuItem.IsParent becomes true [modified] Pinmemberbebangs30-Aug-05 20:36 
GeneralInaccessible due to Protection Level PinsussEdward Garson9-Aug-05 7:40 
Generalmy experiences Pinmembermylitziname14-Jul-05 5:02 
QuestionHow to create Menubar in MDI Frame ? PinsussjohnNguyen13-Apr-05 3:12 
AnswerRe: How to create Menubar in MDI Frame ? PinmemberECAdam23-Nov-05 4:08 
Generalbug in MenuHelper.CalcWidth Pinmemberjviveiros12-Apr-05 3:55 
GeneralRe: bug in MenuHelper.CalcWidth Pinmemberjviveiros13-Apr-05 0:00 
GeneralRe: bug in MenuHelper.CalcWidth Pinmemberrcsuddeth26-Apr-05 9:54 
GeneralRe: bug in MenuHelper.CalcWidth Pinmemberjviveiros28-Apr-05 0:16 
General32 bit icons on the menu. Pinmemberrossie23-Mar-05 14:33 
GeneralRe: 32 bit icons on the menu. PinmemberMatt10925-Jul-06 23:46 
QuestionHow Can I get the MenuHelper ? Thanks! Pinmemberc1c_c1c6-Mar-05 16:47 
Generalstep by step tutorial Pinmemberjemmerson14-Feb-05 19:55 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 25 Nov 2002
Article Copyright 2002 by Chris Beckett
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid