Click here to Skip to main content
15,888,461 members
Articles / Programming Languages / C#

MenuItem Extender - Add Images and Font Support to Your Menu

Rate me:
Please Sign up or sign in to vote.
4.80/5 (30 votes)
29 Feb 20044 min read 211.3K   1.6K   86   41
An extender provider component that provides Image and Font properties to a MenuItem class.

Sample context menu without XP theme applied

Figure 1.

Sample menu with XP theme applied

Figure 2.

Introduction

No need to say that many of us tried to decorate downcast appearance of standard menus. And so did I. First of all, I tried to find something suitable amongst already written code. And the best code that I've found belongs to Chris Beckett: Menu Images using C# and IExtenderProvider - a better mousetrap! published on The Code Project.

Then I tried to make the code a bit more flexible: enable owner drawing for some menu items, not all, allow to use custom fonts for menu text and make an ImageIndex selector for VS Designer. Although not all problems were solved - I'll write about it below - you can use this code and I hope to improve it.

Using the MenuExtender

Because this article has appeared as a remaking of Chris' MenuImageLib class, I refer you to his article if you wish to know how to extend standard class behavior with IExtenderProvider. He clearly demonstrates how to add owner drawn menus without overriding OnMeasureItem and OnDrawItem for every menu item.

My version of the MenuExtender provides the following properties to the MenuItem:

  • Draw an icon of any size
  • Draw a text with a custom Font or SystemInformation.MenuFont
  • Enable/disable the extender for particular menu items

The MenuExtender is applicable for non-top menu items and context menus. In order to use it in your project, add it to your VS toolbox:

  • Right-click on the "Windows Forms" tab in the Toolbox
  • Choose "Add/Remove Items..."
  • On the ".NET Framework Components", press the "Browse..." button and find a MenuExtender.dll

That will add a "MenuExtender" icon to the Windows Forms tab. Drag this icon to your form. By this action, you will add the MenuExtender component to your project:

C#
private MenuExtender.MenuExtender menuExtender;
// :
this.menuExtender = new MenuExtender.MenuExtender(this.components);

Now you should set some properties for the MenuExtender. Using the Properties window, set an ImageList (if you have one) with images for icons on your menu items:

Figure 3.

If SystemFont is true, it means that texts on your menus will be displayed with the SystemInformation.MenuFont. If you wish to use some other font - just select it for the Font property and set SystemFont to false. That will generate the following code:

C#
this.menuExtender.Font = new System.Drawing.Font("Tahoma", 9.75F,
    System.Drawing.FontStyle.Regular,
    System.Drawing.GraphicsUnit.Point,
    ((System.Byte)(204)));
this.menuExtender.ImageList = this.imageList;
this.menuExtender.SystemFont = false;

But I don't advice to do it in the beginning of your application. If a user's computer doesn't have the specified font installed - you'll get an exception. You can write this piece of code somewhere in "Customize your application" class. If you have already set some font and wish to return to default settings - right-click on the "Font" field and select "Reset".

And, at last, we can tune our menu items. Select one and find the "Menu Extender" category in the Property window:

Figure 4.

If ExtEnable is true - the menu item will be drawn by the MenuExtender. The ImageIndex is the index of the image item in the ImageList associated with the MenuExtender. Pay attention to OwnerDraw property - it is set to true automatically. Final code for a menu item looks like the following:

C#
this.menuExtender.SetExtEnable(this.menuItem4, true);
this.menuExtender.SetImageIndex(this.menuItem4, 2);
this.menuItem4.OwnerDraw = true;

Now it's time to start the engine! Compile the test project and run it.

Tips & Tricks

If you compare the menu separators on Figure 1 and Figure 2, you can see that the left separator has a custom 3D look. It's because the MenuExtender was not enabled for this separator. I think it's better than to track XP theme switching.

Known Problems

I've found one serious limitation - this class cannot be used in a MDI application. The reason lies out of my class - it's a common problem for the framework. You can easily ascertain that your owner drawn menu items in a MainMenu of a MDI parent form can disappear. Create a MDI child form with its own menus added/merged to the parent. Open a few child forms and close them. Look at your MainMenu with owner drawn items - they are blank. The similar problem with owner drawn menus attached to a NotifyIcon component is described in the Knowledge Base article 827043.

Acknowledgements

I used a great many sources for my work. But the first one was Menu Images using C# and IExtenderProvider - a better mousetrap! by Chris Beckett.

Another good resource is Dino Esposito's article in the MSDN Magazine - Cutting Edge: Owner-Drawing in .NET.

History

  • February 23rd, 2004 - First release

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
Latvia Latvia
Jevgenij lives in Riga, Latvia. He started his programmer's career in 1983 developing software for radio equipment CAD systems. Created computer graphics for TV. Developed Internet credit card processing systems for banks.
Now he is System Analyst in Accenture.

Comments and Discussions

 
GeneralProperties not present on inherited forms Pin
sssuthe28-Sep-04 10:15
sssuthe28-Sep-04 10:15 
GeneralRe: Properties not present on inherited forms Pin
Jevgenij Pankov28-Sep-04 22:37
Jevgenij Pankov28-Sep-04 22:37 
GeneralRe: Properties not present on inherited forms Pin
sssuthe29-Sep-04 5:37
sssuthe29-Sep-04 5:37 
GeneralRe: Properties not present on inherited forms Pin
sssuthe29-Sep-04 7:12
sssuthe29-Sep-04 7:12 
GeneralGreat code, but one question Pin
luo hao28-Aug-04 22:29
luo hao28-Aug-04 22:29 
GeneralGreat code, one question though. Pin
davegalligher1-Jun-04 13:10
davegalligher1-Jun-04 13:10 
GeneralRe: Great code, one question though. Pin
Eugene Pankov2-Jun-04 0:50
sussEugene Pankov2-Jun-04 0:50 
GeneralRe: Great code, one question though. Pin
davegalligher2-Jun-04 4:37
davegalligher2-Jun-04 4:37 
Perfect, I did change the name of class and the library.

Here is the code I promised on the last posting, only modified two functions in the MenuHelper class. Sorry for the sloppy formatting, pasting into this e-mail editor is not the easiest thing, is formatted properly in my code. This codes purpose is to draw the left rectangle under the icons so when it runs, you get that vertical stripe appearance on the left side.

public void DrawBackground( Rectangle bounds, bool selected )
{
// calculate the area for the shaded area of menu bar - could've made private helper
// routine to calculate the size of rectLeft, but this is a little quicker one less
// function call and we are only updating two areas (see also DrawSeparator)
Rectangle rectLeft = new Rectangle(bounds.Left, bounds.Top, this.iconSize.Width + LEFT_MARGIN + 2, bounds.Height);

// used to calculate the text area
Rectangle rectRight = new Rectangle(rectLeft.Right + 2, rectLeft.Top, bounds.Width - rectLeft.Width - 2, bounds.Height);

if( selected )
{
gfx.FillRectangle(SystemBrushes.Highlight, rectRight);
// this just outlines the area a little cleaner, if you don't have enough
// pen width to see affect, you can adjust the size of the pen
rectRight.Inflate(-2,-2);
gfx.DrawRectangle( new Pen(new SolidBrush(SystemColors.ActiveCaption)), rectRight);
}
else
{
// we could get fancy on this and create a linear gradient brush so it looks
// like office 2003 products, but a solid brush in the control color seems to
// look right on different color schemes
gfx.FillRectangle(new SolidBrush(SystemColors.Control), rectLeft);
gfx.FillRectangle(SystemBrushes.Menu, rectRight);
}
}

public void DrawSeperator( Rectangle bounds )
{
Pen pen = new Pen( SystemColors.ControlDark );
int yCenter = bounds.Top + (bounds.Height / 2);
int nOffset = bounds.Left + LEFT_MARGIN + iconSize.Width + RIGHT_MARGIN;

// need this to draw the rectangle area for the shaded area to the left.
Rectangle rectLeft = new Rectangle(bounds.Left, bounds.Top, this.iconSize.Width + LEFT_MARGIN + 2,bounds.Height);
gfx.FillRectangle(new SolidBrush(SystemColors.Control), rectLeft);
// adjustment made to handle shaded rectangle, primarily
// starting point of the separator line
// line goes to edge of menu so even if it is a little long
// it doesn't matter
gfx.DrawLine(pen, nOffset, yCenter, (nOffset + bounds.Width - 2), yCenter);
}

Dave Galligher
Director of Product Development
Cougar Mountain Software
davegalligher@cougarmtn.com
Voice: 208.375.4455 x180
Fax: 208.375.4460
GeneralRe: Great code, one question though. Pin
Jevgenij Pankov3-Jun-04 3:06
Jevgenij Pankov3-Jun-04 3:06 
GeneralOwnerDraw for NotifyIcon Pin
legege28-May-04 15:55
legege28-May-04 15:55 
GeneralThanks again Pin
-=MaXiMuS=-17-Mar-04 4:12
-=MaXiMuS=-17-Mar-04 4:12 
GeneralThanks Pin
Yuri Ovchinnikov9-Mar-04 8:07
Yuri Ovchinnikov9-Mar-04 8:07 

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.