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?

You *probabbly* should think about using another yet converter that converts every single {Binding} to actual command call. — Tigran, Mar 22 '13 at 09:31

score 20 · Accepted Answer · edited Jan 16 '20 at 17:51

20

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.

edited Jan 16 '20 at 17:51

Dorado

411
2
15

answered Mar 22 '13 at 09:44

dowhilefor

10,971
3
28
45

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. – Quark Soup Jan 14 '14 at 12:40
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 inside a ContextAction. For Separators see [this](http://stackoverflow.com/questions/4823760/how-to-add-horizontal-separator-in-a-dynamically-created-contextmenu) solution. – dowhilefor Jan 14 '14 at 13:53

score 15 · Answer 2 · answered Mar 22 '13 at 09:48

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

This solution has nested control of MenuItem – Ole K Apr 21 '16 at 07:58 — Ole K, Apr 21 '16 at 07:58

score 7 · Answer 3 · answered Apr 21 '16 at 08:46

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>

ContextMenu in MVVM

3 Answers3

Linked