Building EasyHyperbar Navigation Control in Silverlight

Source code for this sample

View sample

Design 

The ideas behind the design in order of importance:

·         Be very easy to click and follow the links (that’s why it’s called EasyHyperbar)

To avoid “link hunting” as in a typical hyperbar control the clickable items always stay in place.

·         Be very easy to identify what will happen when a link is clicked (another reason to call this EasyHyperbar)

To achieve this I add text below each image that is always visible and a description is shown when the mouse hovers over the image.

·         Visually appealing and unobtrusive at the same time

Achieved by adding part of “hyperbar” look and feel to the controls on the Easyhyperbar. The animations are short and fast to be unobtrusive even with prolonged use.

Implementation

The EasyHyperbar consists of:

·         Background image with space for the info text for each item

·         StackPanel containing ToolbarItem controls

The ToolbarItem-s must be well-spaced in on the EasyHyperbar control, in order to allow them to look nice when zoomed. To achieve this set the SIDE_MARGIN variable appropriately for your project.

The BASELINE_MARGIN variable specifies the offset of the vertical center point the ToolbarItem-s. Change it until the zooming looks natural (not too much to the top or bottom of the EasyHyperbar control).

Each ToolbarItem sets its Width property when loaded, based on its contents. It has to do this in order to be positioned properly within the parent StackPanel containing all toolbar items.

The ToolbarItem will generally not report its width properly otherwise – because its contents are stored inside a Canvas: to allow the zoom to be centered correctly, we need to move the item to the left and right as it is enlarged and shrinked.

An interesting challenge was the “poppy” behavior when we get the mouse outside of the EasyHyperbar control – to avoid sudden “pop up” of the toolbar items when the mouse enters the Silverlight control from the HTML page, we add a special animation animPopup to smooth the pop up of the toolbar item.

Last but not least is the frosted glass effect on the black line of the control. I do it by having 2 images and layering them on top of each other using opacity masks (for a good example of this technique see the Saturation Light Sample)

Call to Action

I’d love if someone improves this source (actually making a separate custom control) and sends back the source to me: nokola@nokola.com