Section 3.3. Add Icons to Your Menu | Visual Basic 2005: A Developers Notebook

3.3. Add Icons to Your Menu

Windows applications have been undergoing a gradual facelift since Windows XP and Office XP first appeared on the scene. Today, many modern Windows applications use a fine-tuned menu that sports a blue shaded margin on its left side, and an optional icon for each menu command. (To see what this looks like, you can jump ahead to Figure 3-5.)

Note: Jazz up your dullest menus with thumbnail images.

If you wanted to create a polished-looking menu with this appearance in .NET 1.0 or 1.1, you needed to draw it yourself using GDI+ code. Although there are several surprisingly good examples of this technique available on the Internet, it's more than a little messy. In .NET 2.0, the situation improves dramatically. Even though the original MainMenu and ContextMenu controls are unchanged, two new controlsMenuStrip and ContextMenuStripprovide the same functionality but render the menu with the new Office XP look.

3.3.1. How do I do that?

The MenuStrip and ContextMenuStrip classes leverage all the hard work that went into building the ToolStrip class. Essentially, a MenuStrip is a special container for ToolStripItem objects. The MenuStrip.Items property holds a collection of top-level menu headings (like File, Edit, View, and Help), each of which is represented by a ToolStripMenuItem object. Each ToolStripMenuItem has a DropDownItemsProperty, which exposes another collection of ToolStripMenuItem objects, one for each contained menu item.

Example 3-2 shows code that creates the familiar Windows File menu.

Example 3-2. Creating a Windows File menu

' Add the top-level items to the menu. MenuStrip1.Items.AddRange(New ToolStripItem( ) _   {fileToolStripMenuItem})      ' Set the text for the File menu, and set "F" as the  ' quick access key (so that Alt+F will open the menu.) fileToolStripMenuItem.Text = "&File"      ' Add the child items to the File menu. fileToolStripMenuItem.DropDownItems.AddRange(New ToolStripItem( ) _   {newToolStripMenuItem, openToolStripMenuItem, _   toolStripSeparator, saveToolStripMenuItem, _   saveAsToolStripMenuItem, toolStripSeparator1, _   printToolStripMenuItem, printPreviewToolStripMenuItem, _   toolStripSeparator2, exitToolStripMenuItem})      ' Configure the File child items. ' Set the text and shortcut key for the New menu option. newToolStripMenuItem.ShortcutKeys = CType((Keys.Control Or Keys.N), Keys) newToolStripMenuItem.Text = "&New"      ' Set the text and shortcut key for the Open menu option. openToolStripMenuItem.ShortcutKeys = CType((Keys.Control Or Keys.O), Keys) openToolStripMenuItem.Text = "&Open"      ' (Code for configuring other omitted menu items.)

Usually, you won't enter this information by handinstead, it's part of the designer code that Visual Studio generates automatically as you set the properties in the Properties window. However, it does show you how the menu works and what you'll need to do if you want to dynamically add new items at runtime.

As Example 3-2 reveals, the structure of a MenuStrip control is the same as the structure of its predecessor, the MainMenu control, with menu objects containing other menu objects. The only difference is in the type of object used to represent menu items (it's now ToolStripMenuItem instead of MenuItem) and the name of the property used to hold the collection of contained menu items (ToolStripMenuItem.DropDownItems instead of MenuItem.ChildItems).

To reap the real benefits of the new ToolStripMenuItem, you need to use one property that wasn't available with ordinary MenuItem objects: the Image property, which sets the thumbnail icon that appears in the menu margin.

newToolStripMenuItem.Image = CType( _   resources.GetObject("newToolStripMenuItem.Image"), _   System.Drawing.Image)

Figure 3-5 shows the standard File menu.

Figure 3-5. The new MenuStrip

Usually, you'll load all your images using the Visual Studio Properties Window at design time. In that case, they'll be embedded as a resource inside your assembly. Another option is to load them into an ImageList and then set the ImageKey or IndexProperty of ToolStripMenuItem to point to an image in the ImageList.

Note: To quickly generate a basic menu framework (including the standard menu commands for the File, Edit, Tools, and Help menu), click the MenuStrip smart tag and select Insert Standard Items.

3.3.2. What about...

...painting a menu from scratch? Hopefully, you won't need to. The ToolStripMenuItem gives you a little bit more flexibility than the original MenuItem classnot only can you insert images, but you can also choose a nonstandard font by setting the ToolStripMenuItem.Font property. Here's an example:

fileToolStripMenuItem.Font = New Font("Verdana", 10, FontStyle.Regular)

This technique is useful when you want to show a list of fonts in some sort of document editing application, and you want to render the font names in their corresponding typefaces in the menu.

If you need to perform more radical alterations to how a menu is drawn, you'll need to use another renderer. The MenuStrip, like all the "strip" controls, provides a RenderMode and a Renderer property. The RenderMode property allows you to use one of the built-in renderers by choosing a value from the ToolStripRenderMode enumeration (such as Professional, System, and Custom). If you want to use a renderer of your own, select Custom and then supply a new renderer object in the Renderer property. This renderer could be an instance of a third-party class or an instance of a class you've created (just derive from ToolStripRenderer and override the methods to supply your specialized painting logic).