How do I bind a command to a WPF Telerik radMenuItem in XAML?

Question

I'm building a .Net WPF application using the Telerik control library.
My dashboard has several menus that I implemented.
I'm attempting to use the MVVM model.

The class definition for my menu items (within the MVVM) looks like this:

public class MenuItemVM : MenuVM
{    
    public enum MenuItemTypes : uint
    {   
         Link,
         SpecialLink,
         TopLevel,
         TopLevelWithDropDown,
         TopLevelImage,
         TopLevelSection,
         Title,
         Item,
         Footer,
         Separator,
         Paragraph,
         Gallery,
         Image
    };

    public string Name { get; set; }
    public string Content { get; set; }
    public MenuItemTypes Type { get; set; }
    private bool isSeparator = false;

    public bool IsSeparator
    {
      get { return isSeparator; }
      set { isSeparator = value;}
    }
    public ICommand Command { get; set; }
}

The definition of a menu in XAML looks like this:

telerik:RadMenu Grid.Column="0" 
Name="MainMenu" 
Orientation="Vertical" 
Margin="10,30,0,20"
Style="{StaticResource MainMenuStyle}" 
Height="1200"
ItemsSource="{StaticResource MainMenuItemsSource}" 
ItemContainerStyleSelector="{StaticResource MainMenuItemStyleSelector}" 
ItemContainerStyle="{x:Null}" 

My ViewModel is defined in the Windows.Resources XAML:

<viewModel:MenuVM x:Key="MainMenuItemsSource">  
    <viewModel:MenuItemVM Name="Test1" Content="Do Test 1" Type="Item" Command="??"/>
    <viewModel:MenuItemVM Name="Test2" Content="Do Test 2" Type="Item" Command="??"/> 
    <viewModel:MenuItemVM Name="Test3" Content="Do Test 3" Type="Item" Command="??"/>
</viewModel:MenuVM>

I'm using "Style" and "ControlTemplate" to define the layout of the menu controls.

I have a simple Command that I'm trying to bind to a menu item.

namespace SampleApp.Commands
{
    public class CommandTest : ICommand
    {
        public event EventHandler CanExecuteChanged;
        public bool CanExecute(object parameter)
        {
            return true;
        }
        public void Execute(object parameter)
        {
            MessageBox.Show("Command Clicked!!!");
        }
    }
}

The menus display correctly.

I can't figure out how to bind the command to menu items in the menu definition.

Answer 1

Set the Command property of the MenuItemVM objects to an instance of your CommandTest class:

<viewModel:MenuVM x:Key="MainMenuItemsSource" xmlns:commands="clr-namespace:SampleApp.Commands">
    <viewModel:MenuItemVM Name="Test1" Content="Do Test 1" Type="Item">
        <viewModel:MenuItemVM.Command>
            <commands:CommandTest />
        </viewModel:MenuItemVM.Command>
    </viewModel:MenuItemVM>
    <viewModel:MenuItemVM Name="Test2" Content="Do Test 2" Type="Item">
        <viewModel:MenuItemVM.Command>
            <commands:CommandTest />
        </viewModel:MenuItemVM.Command>
    </viewModel:MenuItemVM>
    <viewModel:MenuItemVM Name="Test3" Content="Do Test 3" Type="Item">
        <viewModel:MenuItemVM.Command>
            <commands:CommandTest />
        </viewModel:MenuItemVM.Command>
    </viewModel:MenuItemVM>
</viewModel:MenuVM>

And bind the Command property of the RadMenuItem container to the Command source property of each MenuItemVM :

<telerik:RadMenu Grid.Column="0" 
        Name="MainMenu" 
        Orientation="Vertical" 
        Margin="10,30,0,20"
        Height="1200"
        ItemsSource="{StaticResource MainMenuItemsSource}">
    <telerik:RadMenu.ItemContainerStyle>
        <Style TargetType="telerik:RadMenuItem" BasedOn="{StaticResource {x:Type telerik:RadMenuItem}}">
            <Setter Property="Command" Value="{Binding Command}" />
        </Style>
    </telerik:RadMenu.ItemContainerStyle>
</telerik:RadMenu>