WPF / Silverlight: Integrating RadChart and RadContextMenu Controls

One common request that we are receiving recently is how to integrate the RadChart and RadContextMenu controls so they play nicely together.

A typical real-life scenario would probably require that each ChartItem should display different (context-specific) set of menu items. In order to address the increased interest in this functionality we decided to add a new integration example for the Q1 2010 release but for those of you that need something working right now, here is a quick overview of the required steps to add context-specific menu to Bar series items in RadChart (this can be applied to any series type).

Basically, the approach that I will be demonstrating here combines the MVVM support of RadChart with RadChart data-binding, and the data-binding functionality supported by the RadMenu (RadContextMenu) control:

• First, in order to use RadContextMenu you have to set your application to be windowless for Silverlight (to disable the right click that displays information about Silverlight).
• Now you need to re-template the desired chart series type in order to place a RadContextMenu instance as attached property in its template:

Silverlight code:

• Notice that the ContextMenu is databound to a property of your chart DataItem instance that exposes the desired menu items’ structure (i.e. the chart control is databound to a List of ChartDataItem objects, and the ChartDataItem class exposes MenuItems property; {Binding DataItem.MenuItems} holds reference to a specific ChartDataItem instance).
• Notice that the RadContextMenu can support hierarchical Menu structure as well (as with stand-alone Menu you need to create a HierarchicalDataTemplate that specifies the ItemsSource, ItemTemplate and other properties of the item's children).
• Also, notice the difference between WPF and Silverlight when binding RadMenuItem properties, such as IsSeparator, Icon, IsEnabled, etc.
• For WPF you can use the ItemsControl.ItemContainerStyle to achieve the desired functionality.
• For Silverlight you can use the ContainerBindings mechanism implemented by Telerik that allows you to bind properties of an item container (RadMenuItem, RadTreeViewItem, etc.) to the properties of the data objects. The container bindings are always set through a DataTemplate or HierarchicalDataTemplate:

Silverlight code:

• I will not list the actual business classes required for the data binding of the chart and the menu controls (MenuItem, MenuItemCollection, ChartDataItem, ChartDataItemCollection) as there is nothing special about them – you can find them in the runnable sample application attached to this post. What is left is to add the chart control declaration, bind it to a property of the ViewModel set as a DataContext for the respective user control, and instruct the control to use the custom bar style declared earlier: