Circular Menu Tutorial

Summary:

The circular menu component can be used within .NET-enabled languages to provide a different kind of user experience.  The ciruclar menu is a popup menu that arranges menu options circularly around the position where the user clicked.  Circular menus can also be animated, and provide a number of utilities for enabling a more stylized interface.

Where to Find It:

<< Prof. Ludi--please place links here >>

The Basics:

You add a circular menu to your application by using the CircularMenuPopup and MenuOption classes.  The popup class is a component that you can add to your forms using the Visual Studio designer (you can also configure it entirely with code).

Options are added to a CircularMenuPopup instance by placing MenuOption objects within the popup's MenuOptions collection property.  Each option defines separate images for normal, roll-over, depressed, and disabled states.  You can use these image properties to fine-tune the look and feel of your menu. Each image can be further controlled by setting its overall transparency and by applying a drop shadow.

An application is notified of user interactions with the menu via a set of events for which the application must write handlers.  The primary event is the Click event of the MenuOption class.  See the documentation for the CircularMenuPopup and MenuOption classes for a complete listing of available events.

The circular menu is shown via its Popup() method, which is given the coordinates of its central pixel.  Because of this, you must write your own code to handle mouse clicks for showing the menu.

Customization:

As mentioned before, menu options can be customized with images for a number of different states.  Furthermore, each option defines a tool-tip property that contains a string to be displayed to the user when the mouse hovers over that option.

Most customization is controlled by the CircularMenuPopup class.  It has two properties, OpeningAnimation and ClosingAnimation, that control how the menu is animated both when it is opened and when it is closed.  Each property contains an instance of the MenuAnimation class, which controlls the number of frames in the animation as well as its style and effects.

The Radius property of the CircularMenuPopup class controls the overall size of the menu.  This value, measured in pixels, controls how much space should appear between the center of a menu option and the position where the user clicked.

The appearance and position of the tool-tips is controlled via the CircularMenuPopup.ToolTip property.  This property controls the foreground color, background color, border size, and font of the tool tips.

Finally, you can customize the behavior of the circular menu by implementing the following interfaces:

• IFrameLayoutManager:  Classes of this type are responsible for the layout of the menu in each frame of an animation, as well as when the animations have completed.  They are applied to the MenuAnimation's LayoutManager property.
• IFrameModifier:  Applies special effects (such as zoom-in and fade-in) to menu options during an animation.  Set the MenuAnimation's FrameImageEffect property to an instance of this class.
• IToolTipRenderer and IExtraSpaceToolTipRenderer:  Responsible for positioning and rendering menu tool tips.  Set the CircularMenuPopup.ToolTipOverride property to an instance of this class to override the default tool-tip behavior with one of your own design.

Best Practices:

• Don't rely on tool-tips.  Your menu icons should be indicative of their purpose.  For more efficiency, users will learn to scan for icons instead of scanning for the icon with the right tool-tip.
• Use large icons.  We have tested sucessfully with icons 40 pixels on each side.
• Use short tool-tips:  Think of the tool-tips as if they were the actual text on a traditional menu.
• Don't be too flashy:  This especially applies to the animations and animation effects.  Flashy animations might be cool the first few times, but realize that users will be accessing your popup frequently, and these can get annoying fast.
• Use short animations: Between 1/3 and 1/2 second (10-15 frames), ideally.  The less a user has to wait for a menu to be ready, the better.  You can also completly turn off an animation by setting it to render a single frame.
• Limit the number of options:  This menu is meant for quick access to commonly used or context-sensitive features.  Because of this, a popup with lots of options can become daunting to a user and can mitigate the usefulness.  Ideally, the popup menu should be used in concert with toolbars for maximum usability.

Limitations:

The primary limitation on the circular menu is how it handles animations.  Because animating menu frames can be a time-intensive task (espeically when using image effects and drop shadows), the system creates a cached version of each animation.  This can cause a breif pause the first time a user summons the menu, but should not be noticeable in subsequent popups.

This caching behavior means that if you change any of the appearance properties for menu options or animations and want those changes to be accounted for when the menu is animating, the animation cache should be cleared and rebuilt.  This can be accomplished via the ClearAnimation and GetAnimation methods of the MenuAnimation class.  You can also use GetAnimation to preload menu animations on application startup.

References:

• << Prof. Ludi--please place link to the .DOC tutorial here >>