Introduction

This is the second release of this control, so my previous article was a bit poor, I decided to update it too. I based the development of this control on Vista start menu, but as you can see in the image above, it can be easily customized to support other styles, themes, etc. See demo project for more details (mac style menus, applying themes at runtime, etc.).

Using the Code

Using this control is extremely easy. Just add it to your toolbox, then drag & drop on your form.

Next, populate the menu control, adding menu items. There are several overloaded methods you can use to achieve this:

Structure

The image below shows different elements of a menu control. Menu items are rich-rendered, that means, they have an image representation, caption to identify them, and a short description. Every menu item is limited by a separator. They can be flat, 3D, and in this release of a control, you can also specify not to render them at all. This feature will be presented later on. With a menu sidebar you can group different menus, using distinct name, and also provide an icon that will be rendered next to sidebar caption.

Menu panel is rendered using gradient colors as shown in the image.The control implements a lot of properties related to menu's appearance, like start and end gradient colors, inner/ outer border colors, sidebar gradient colors:

public Color MenuStartColor

public Color MenuEndColor

public Color MenuInnerBorderColor

public Color MenuOuterBorderColor

public Color SideBarStartGradient

public Color SideBarEndGradient

Vista menu control is also able to render background image. You can set the image alignment, defined by ContentAlignment enumeration, and then DrawBackImage is invoked to draw the image.

It controls the rendering process of menu items, depending on item's state (disabled, hovering, checked). Also, it specifies how item caption, description, image and separators are rendered according to the orientation of a menu.

Each of the menu items is represented by VistaMenuItem class. As shown in the class diagram, there are a huge number of properties to customize an item's appearance. VistaMenuItems is a class extended from CollectionBase and it holds all menu items, and controls the addition / deletion. This way, we can easily perform hittest operations, when searching the hovering item, or detecting mouse clicks over target menu item. Other important methods, related to menu's functionality are HitTestItem, and CalcMenuSize.

The first of them is used to find an hovering item when the sidebar is rendered. It first checks if mouse is inside the menu area, excluding sidebar rectangle width. If condition evaluates to true, then we iterate through items collection, and find the correct item index. The second one dynamically adjusts menu height or width, depending on menu's orientation.

New Features

One of the new cool features in this update is the ability to show menu horizontally. This feature is controlled by MenuOrientation property. I found this feature specially interesting to use in the main application's window where you can introduce parts of your application. For example, Nero StartSmart Essentials. Note that, when menu is shown horizontally, sidebar can't be rendered.

Another useful feature implemented, is checked state. When item is checked, you can specify , item's gradient colors, and also caption / description font color. To activate this feature you should set CheckOnClick feature to true.

You can programmatically get / select menu item using SelectedItem property.

I was plesently impressed by this control.
2 issues that I encountered are:
1. Resizing the form to something a bit smaller, then resizing it back screws up the drawing of the control.
2. There are some performance improvements that can be done - you are creating a Graphics objects too many times, inflating rectangles several times, etc....