New to Telerik UI for WPF? Download free 30-day trial

Binding to Object

With the Q1 2015 release version of UI for WPF, RadRadialMenu provides a new way to easily populate its items in a MVVM manner. The control now supports data binding to a collection of business objects through the new ItemsSource property.

The following example will demonstrate how to bind RadRadialMenu with a collection of custom objects from the ViewModel.

Implementing a Custom Object

In order to be able to successfully use the binding feature of the control, the used custom objects need to implement the IRadialMenuItem interface. The interface provides all the required properties for RadRadialMenuItem:

public class CustomMenuItem : IRadialMenuItem 
{ 
    public bool CanUserSelect { get; set; } 
    public System.Windows.Input.ICommand Command { get; set; } 
    public object CommandParameter { get; set; } 
    public System.Windows.UIElement CommandTarget { get; set; } 
    public Brush ContentSectorBackground { get; set; } 
    public string GroupName { get; set; } 
    public object Header { get; set; } 
    public object IconContent { get; set; } 
    public bool IsSelected { get; set; } 
    public IEnumerable<IRadialMenuItem> ItemsSource { get; set; } 
    public object ToolTipContent { get; set; } 
} 

Note that if you need to change any of those properties at run time you would need implement also the INotifyPropertyChanged, interface or inherit from the built in ViewModelBase class in order to raise PropertyChanged of required properties.

Implementing a ViewModel

The next thing is to simply define the needed source collection of CustomMenuItems in the ViewModel. Once this is done we will be able to bind it to the ItemsSource property.

public class ViewModel : ViewModelBase 
{ 
    public ObservableCollection<CustomMenuItem> MenuItems { get; set; } 
 
    public ViewModel() 
    { 
        this.MenuItems = this.GetMenuItems(); 
    } 
 
    private ObservableCollection<CustomMenuItem> GetMenuItems() 
    { 
        var collection = new ObservableCollection<CustomMenuItem>(); 
 
        var fileItem = new CustomMenuItem { Header = "File" }; 
        collection.Add(fileItem); 
 
        var uploadItem = new CustomMenuItem { Header = "Upload" }; 
        collection.Add(uploadItem); 
 
        var mailItem = new CustomMenuItem { Header = "Mail" }; 
        mailItem.ItemsSource = new ObservableCollection<CustomMenuItem> 
            { 
                new CustomMenuItem { Header = "Inbox" }, 
                new CustomMenuItem { Header = "Drafts" }, 
                new CustomMenuItem { Header = "Sent" }, 
                new CustomMenuItem { Header = "Deleted" } 
            }; 
        collection.Add(mailItem); 
 
        var favoritesItem = new CustomMenuItem { Header = "Favorites" }; 
        collection.Add(favoritesItem); 
 
        return collection; 
    } 
} 

Binding the Collection in XAML

The final step would be to set the ViewModel as DataContext and bind the already created collection to the ItemsSource property of RadRadialMenu as shown below:

<telerik:RadRadialMenu ItemsSource="{Binding MenuItems}" /> 
You can see the final result on Figure 1.

Figure 1: RadRadialMenu populated from the bound collection of CustomMenuItem objects Rad Radial Menu Populating with data 02

Find a runnable project of the previous example in the WPF Samples GitHub repository.