MVVM DelegateCommand binding error

[Erik Nylund]

Hi,

I saw a similar issue posted in the Silverlight forum. I am not able to use the solution presented there because I need to instantiate my view model with parameters from the view. I am trying to bind a Composite WPF DelegateCommand to a column cell template in my RadGridView.

When I run the application I get this error in the output window:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=LayoutRoot'. BindingExpression:Path=DataContext.StopCommand; DataItem=null; target element is 'Button' (Name='StopButton'); target property is 'Command' (type 'ICommand')

If I bind the command to a button outside the RadGridView it works as expected.

I have the following XAML:

<Window x:Class="MVVMCommand.MainWindow"

x:Name="LayoutRoot"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="300" Width="300"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

<StackPanel>

<Button Content="This one works"

CommandParameter="42"

Command="{Binding ElementName=LayoutRoot, Path=DataContext.StopCommand}" />

<telerik:RadGridView Name="radGridView1" ItemsSource="abcd">

<telerik:RadGridView.Columns>

<telerik:GridViewColumn Header="Start">

<telerik:GridViewColumn.CellTemplate>

<DataTemplate>

<Button Content="This one does not"

CommandParameter="42"

Command="{Binding ElementName=LayoutRoot, Path=DataContext.StopCommand}" />

</DataTemplate>

</telerik:GridViewColumn.CellTemplate>

</telerik:GridViewColumn>

</telerik:RadGridView.Columns>

</telerik:RadGridView>

</StackPanel>

</Window>

The view model looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Practices.Composite.Presentation.Commands;

namespace MVVMCommand
{
    public class MVVMCommandViewModel
    {
        public DelegateCommand<object> StopCommand { get; set; }

        public MVVMCommandViewModel(string s)
        {
            StopCommand = new DelegateCommand<object>(StopCommand_Execute);
        }

        void StopCommand_Execute(object o)
        {

        }
    }
}

My code-behind:

    public partial class MainWindow : Window
    {
        MVVMCommandViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new MVVMCommandViewModel("42");
            this.DataContext = _viewModel;
        }
    }

[Maya]

Hi Erik Nylund,

The problem in the case when defining the button inside CellTemplate is that the Binding with the LayoutRoot cannot be accomplished and this cannot be achieved in xaml. However, as a workaround I may suggest you to invoke the command in the code-behind during the Button_Loaded event:

<telerik:GridViewColumn Header="Start">
                        <telerik:GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="This one works" Loaded="Button_Loaded" CommandParameter="42"/>
                            </DataTemplate>
                        </telerik:GridViewColumn.CellTemplate>
                    </telerik:GridViewColumn>

And the code:

private void Button_Loaded(object sender, RoutedEventArgs e)
        {
            var button = (Button)sender;
            button.Command = this.myViewModel.StopCommand;
        }

 

Sincerely yours,
Maya
the Telerik team