ContextMenu in MVVM

Question

I want to bind a contextmenu to a list of commands.

<Grid.ContextMenu>
    <ContextMenu ItemsSource="{Binding ItemContextCommands, Converter={StaticResource commandToStringConverter}}">
            <ContextMenu.ItemTemplate >
                    <DataTemplate DataType="MenuItem">
                            <MenuItem Command="{Binding}"></MenuItem>
                        </DataTemplate>
                </ContextMenu.ItemTemplate>
        </ContextMenu>
</Grid.ContextMenu>

The commandToStringConverter simply converts a list of commands to a list of strings calling the ToString() on each command in the list.

How can I achieve that the Command in each MenuItem is called?

Solution 1

I would use a small "view model" to hold the informations for such a command.

class ContextAction : INotifyPropertyChanged
{
    public string Name;
    public ICommand Action;
    public Brush Icon;
}

make a collection inside your view model which should get the context actions like

ObservableCollection<ContextAction> Actions {get;set;}

and simply bind this collection to your ContextMenu.

<Grid.ContextMenu>
    <ContextMenu ItemsSource="{Binding Actions}" />

The ItemTemplate for the contextmenu items can now access the name, the command and whatever else you might need. It might be useful to change the CommandParameter as well so that it will call the command with the actions owning element, not with the action itself.

Solution 2

i use something like this:

public class ContextMenuVM
{ 
    public string Displayname {get;set;}
    public ICommand MyContextMenuCommand {get;set;}
}

in your contextmenu datacontext:

public ObservableCollection<ContextMenuVM> MyCommandList {get;set;}

in your xaml

<ContextMenu ItemsSource="{Binding MyCommandList}">
        <ContextMenu.ItemTemplate >
                <DataTemplate DataType="MenuItem">
                        <MenuItem Header="{Binding Displayname}" Command="{Binding MyContextMenuCommand}"></MenuItem>
                    </DataTemplate>
            </ContextMenu.ItemTemplate>
    </ContextMenu>

its written without ide, so maybe some syntax errors in there

Solution 3

An improved XAML version of @blindmils solution below:

<ContextMenu ItemsSource="{Binding MyCommandList}">
    <ContextMenu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding Displayname}" />
            <Setter Property="Command" Value="{Binding MyContextMenuCommand }" />
        </Style>
    </ContextMenu.ItemContainerStyle>
</ContextMenu>

Comments

[Quarkly]

Anyone have an idea how to handle a ContextMenu with separators and submenus? This solution appears to be only useful for a homogenous set of objects.

[dowhilefor]

Submenues are just as easy. You just give the ContextMenu an ItemContainerStyle with a setter for ItemsSource and bind to a new property of type ObservableCollection<ContextAction> inside a ContextAction. For Separators see this solution.

[Ole K]

This solution has nested control of MenuItem