7

I have this context menu resource:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ContextMenu x:Key="FooContextMenu">
        <ContextMenu.CommandBindings>
            <CommandBinding Command="Help" Executed="{Binding ElementName=MainTabs, Path=HelpExecuted}" />
        </ContextMenu.CommandBindings>

        <MenuItem Command="Help">
            <MenuItem.Icon>
                <Image Source="../Resources/Icons/Help.png" Stretch="None" />
            </MenuItem.Icon>
        </MenuItem>
    </ContextMenu>
</ResourceDictionary>

I want to re-use it in two places. Firstly I'm trying to put it in a DataGrid:

<DataGrid ContextMenu="{DynamicResource FooContextMenu}">...

The ContextMenu itself works fine, but with the Executed="..." I have right now breaks the application and throws:

A first chance exception of type 'System.InvalidCastException' occurred in PresentationFramework.dll

Additional information: Unable to cast object of type 'System.Reflection.RuntimeEventInfo' to type 'System.Reflection.MethodInfo'.

If I remove the entire Executed="..." definition, then the code works (and the command does nothing/grayed out). The exception is thrown as soon as I right click the grid/open the context menu.

The DataGrid is placed under a few elements, but eventually they all are below a TabControl (called MainTabs) which has ItemsSource set to a collection of FooViewModels, and in that FooViewModel I have a method HelpExecuted which I want to be called.

Let's visualize:

  • TabControl (ItemsSource=ObservableCollection<FooViewModel>, x:Name=MainTabs)
    • Grid
      • More UI
        • DataGrid (with context menu set)

Why am I getting this error and how can I make the context menu command to "target" the FooViewModel's HelpExecuted method?

1
  • I think that MainTabs control does not contain a HelpExecuted property. It contains just a list of FooViewModel. Apr 30, 2012 at 20:35

5 Answers 5

3
+200

Unfortunately you cannot bind Executed for a ContextMenu as it is an event. An additional problem is that the ContextMenu does not exist in the VisualTree the rest of your application exists. There are solutions for both of this problems.

First of all you can use the Tag property of the parent control of the ContextMenu to pass-through the DataContext of your application. Then you can use an DelegateCommand for your CommandBinding and there you go. Here's a small sample showing View, ViewModel and the DelegateCommand implementation you would have to add to you project.

DelegateCommand.cs

public class DelegateCommand : ICommand
{
    private readonly Action<object> execute;
    private readonly Predicate<object> canExecute;

    public DelegateCommand(Action<object> execute)
        : this(execute, null)
    { }

    public DelegateCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");

        this.execute = execute;
        this.canExecute = canExecute;
    }

    #region ICommand Members

    [DebuggerStepThrough]
    public bool CanExecute(object parameter)
    {
        return canExecute == null ? true : canExecute(parameter);
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public void Execute(object parameter)
    {
        execute(parameter);
    }

    #endregion
}

MainWindowView.xaml

<Window x:Class="Application.MainWindowView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindowView" Height="300" Width="300"
        x:Name="MainWindow">
    <Window.Resources>
        <ResourceDictionary>
            <ContextMenu x:Key="FooContextMenu">
                <MenuItem Header="Help" Command="{Binding PlacementTarget.Tag.HelpExecuted, RelativeSource={RelativeSource AncestorType=ContextMenu}}" />
            </ContextMenu>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <TabControl ItemsSource="{Binding FooViewModels}" x:Name="MainTabs">
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <DataGrid ContextMenu="{DynamicResource FooContextMenu}" Tag="{Binding}" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

MainWindowView.xaml.cs

public partial class MainWindowView : Window
{
    public MainWindowView()
    {
        InitializeComponent();
        DataContext = new MainWindowViewModel();
    }
}

MainWindowViewModel.cs

public class MainWindowViewModel
{
    public ObservableCollection<FooViewModel> FooViewModels { get; set; }

    public MainWindowViewModel()
    {
        FooViewModels = new ObservableCollection<FooViewModel>();
    }
}

FooViewModel.cs

public class FooViewModel
{
    public ICommand HelpExecuted { get; set; }

    public FooViewModel()
    {
        HelpExecuted = new DelegateCommand(ShowHelp);
    }

    private void ShowHelp(object obj)
    {
        // Yay!
    }
}
4
  • Are tags and delegates really the way to go? Stipo had a working and short way to accomplish this, does this approach of yours have something that Stipo's does not? I'm trying to figure out what approach makes most sense, because the answers given here are quite different. :)
    – Tower
    Apr 30, 2012 at 21:12
  • Indeed the answer from Stipo should solve your problem. But if I learned one thing about WPF and MVVM: Never use code-behind if you don't have a very good reason to do it as it annuls the whole pattern. This sometimes means to go a very rocky way :)
    – MatthiasG
    Apr 30, 2012 at 21:19
  • I disagree with MatthiasG that code-behind annuls the MVVM pattern. The most important thing in MVVM is that all application logic and state should be in view model and that there are no direct references to views from view models. Binding the view and view model should be done through XAML, if possible (if WPF/XAML API supports it), otherwise it must be done through code, like in my answer. If bindings through code are repetitive, they can be made XAMLish with attached behaviours.
    – Stipo
    Apr 30, 2012 at 22:04
  • I updated your answer and modified it to work properly as per the question. Thanks for the initial code ;)
    – Tower
    May 1, 2012 at 15:43
3

Does this help?

<ContextMenu>
    <ContextMenu.ItemContainerStyle>
       <Style TargetType="MenuItem">
          <Setter Property="Command" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=HelpExecuted}" />
       </Style>
    </ContextMenu.ItemContainerStyle>
    <MenuItem Header="Help" />
</ContextMenu>
3

I'm afraid MatthiasG beat me to it. My solution is similar:

Here the Help command is handled by the tab item's view model. It would be simple to pass a reference to the TestViewModel to each of the TestItemViewModel and have ShowHelp call back into TestViewModel if required.

public class TestViewModel
{
    public TestViewModel()
    {
        Items = new List<TestItemViewModel>{ 
                    new TestItemViewModel(), new TestItemViewModel() };
    }

    public ICommand HelpCommand { get; private set; }

    public IList<TestItemViewModel> Items { get; private set; }
}

public class TestItemViewModel
{
    public TestItemViewModel()
    {
        // Expression Blend ActionCommand
        HelpCommand = new ActionCommand(ShowHelp);
        Header = "header";
    }

    public ICommand HelpCommand { get; private set; }

    public string Header { get; private set; }

    private void ShowHelp()
    {
        Debug.WriteLine("Help item");
    }
}

The xaml

<Window.Resources>
    <ContextMenu x:Key="FooMenu">
        <MenuItem Header="Help" Command="{Binding HelpCommand}"/>
    </ContextMenu>
    <DataTemplate x:Key="ItemTemplate">
        <!-- context menu on header -->
        <TextBlock Text="{Binding Header}" ContextMenu="{StaticResource FooMenu}"/>
    </DataTemplate>
    <DataTemplate x:Key="ContentTemplate">
        <Grid Background="#FFE5E5E5">
            <!-- context menu on data grid -->
            <DataGrid ContextMenu="{StaticResource FooMenu}"/>
        </Grid>
    </DataTemplate>
</Window.Resources>

<Window.DataContext>
    <WpfApplication2:TestViewModel/>
</Window.DataContext>

<Grid>
    <TabControl 
        ItemsSource="{Binding Items}" 
        ItemTemplate="{StaticResource ItemTemplate}" 
        ContentTemplate="{StaticResource ContentTemplate}" />
</Grid>

Alternative view models so that the help command is directed to the root view model

public class TestViewModel
{
    public TestViewModel()
    {
        var command = new ActionCommand(ShowHelp);

        Items = new List<TestItemViewModel>
                    {
                        new TestItemViewModel(command), 
                        new TestItemViewModel(command)
                    };
    }

    public IList<TestItemViewModel> Items { get; private set; }

    private void ShowHelp()
    {
        Debug.WriteLine("Help root");
    }
}

public class TestItemViewModel
{
    public TestItemViewModel(ICommand helpCommand)
    {
        HelpCommand = helpCommand;
        Header = "header";
    }

    public ICommand HelpCommand { get; private set; }

    public string Header { get; private set; }
}

A very simple implementation of ActionCommand

public class ActionCommand : ICommand
{
    private readonly Action _action;

    public ActionCommand(Action action)
    {
        if (action == null)
        {
            throw new ArgumentNullException("action");
        }

        _action = action;
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        _action();
    }

    // not used
    public event EventHandler CanExecuteChanged;
}
1
  • ActionCommand is available after you install Expression Blend. You would need to add a reference to Microsoft.Expression.Interactions. Alternatively use a DelegateCommand from PRISM or a RelayCommand from MVVM light, or implement your own.
    – Phil
    May 1, 2012 at 12:57
2

You are getting this error because CommandBinding.Executed is not dependency property so you cannot bind to it.

Instead, use ResourceDictionary code behind to specify event handler for CommandBinding.Executed event, and in the event handler code call FooViewModel.HelpExecuted() method like this:

MainWindowResourceDictionary.xaml

<ResourceDictionary x:Class="WpfApplication.MainWindowResourceDictionary" 
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication">

    <DataTemplate DataType="{x:Type local:FooViewModel}">
        <Grid>
            <DataGrid ContextMenu="{DynamicResource FooContextMenu}"/>
        </Grid>
    </DataTemplate>

    <ContextMenu x:Key="FooContextMenu">
        <ContextMenu.CommandBindings>
            <CommandBinding Command="Help" Executed="HelpExecuted"/>
        </ContextMenu.CommandBindings>
        <MenuItem Command="Help"/>
    </ContextMenu>

</ResourceDictionary>

MainWindowResourceDictionary.xaml.cs

public partial class MainWindowResourceDictionary : ResourceDictionary
{
    public MainWindowResourceDictionary()
    {
        InitializeComponent();
    }

    private void HelpExecuted(object sender, ExecutedRoutedEventArgs e)
    {
        var fooViewModel = (FooViewModel)((FrameworkElement)e.Source).DataContext;
        fooViewModel.HelpExecuted();
    }
}
6
  • This works nicely! Do you think there's any drawback to this approach? All answers I've got so far are quite different, seems that there's no definite way to do this...?
    – Tower
    Apr 30, 2012 at 21:10
  • My approach actually uses ApplicationsCommands.Help command (msdn.microsoft.com/en-us/library/…), in which you get Key Gesture and UI Text by default for free. Another benefit of using ApplicationCommands is that they are well known commands (exposed through WPF API) so control authors can use them in their controls without knowing who handles them (who provides the actual implementation of the command logic). Other approaches do not use ApplicationCommands and unnecessary complicate the code by transferring DataContext through Tag.
    – Stipo
    Apr 30, 2012 at 22:20
  • is that a question or a statement? May 1, 2012 at 14:01
  • also, to maintain better decoupling, I'd recommend using an interface which defines HelpExecuted or HelpCommand instead of relying directly on (FooViewModel) May 1, 2012 at 14:03
  • If you are referring to custom ICommand that resides in your view model, then you are correct, CommandBinding won't work, it works only with RoutedCommands. If you don't care to use ApplicationCommands.Help, then you should go with MatthiasG answer, but without complications of transferring DataContext through Tag property because ContextMenu and MenuItems recieve the same DataContext as DataGrid, so you can write as this: <ContextMenu x:Key="FooContextMenu"><MenuItem Header="Help" Command="{Binding HelpExecuted}"/></ContextMenu>
    – Stipo
    May 1, 2012 at 14:25
1

It is possible to create an adapter class which can be configured as a resource in XAML, can be attached to a Control in order to create CommandBindings there, and on the other end can bind to a method in the ViewModel which should be called when the command is triggered by a Button or MenuItem. The command in this case would be a RoutedCommand, and it wouldn't matter whether you choose one of the predefined WPF commands or create a custom RoutedCommand in your application.

The trick for binding to a method is

  • Making the adapter a Freezable, so one can use the current DataContext as a binding source,
  • Giving it a DependencyProperty of type Delegate or one of its subtypes, and
  • Using a converter which accepts the method name as a ConverterParameter and inspects the binding sources type in order to create a Delegate for the method that should be invoked by the command.

While this sounds complex, the good thing is that once you have the parts of the framework together, you can simply reuse them in XAML only, and you won't have any glue code at all in either ViewModel or code behind.

As you can imagine, this takes some infrastructure, and the code is more than I would like to post here. However, I've just published an article in my blog on the subject, http://wpfglue.wordpress.com/2012/05/07/commanding-binding-controls-to-methods/ , and through the blog you can download complete source code for the framework and an example in VB.Net .

Applied to your problem, the XAML would then look like this:

In the definition of the ContextMenu:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ContextMenu x:Key="FooContextMenu">
    <!-- No CommandBindings needed here -->
    <MenuItem Command="Help">
        <MenuItem.Icon>
            <Image Source="../Resources/Icons/Help.png" Stretch="None" />
        </MenuItem.Icon>
    </MenuItem>
</ContextMenu>
</ResourceDictionary>

And in the definition of the DataGrid

<DataGrid c:Commanding.CommandSet="{DynamicResource helpCommand}">
    <DataGrid.Resources>
        <f:ActionConverter x:Key="actionConverter"/>
        <c:ActionCommand x:Key="helpCommand" Command="Help" ExecutedAction="{Binding Converter={StaticResource actionConverter}, ConverterParameter=HelpExecuted}"/>
<!-- DataGrid definition continued... -->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.