When you develop WPF applications following the MVVM design pattern, you will eventually come across the requirement to bind commands. With MVVM, you typically do not write any code behind the XAML page, such as click events. Thanks to the Microsoft Interactivity library, we can bind click events to our view model for any UI control. In this blow, we'll discuss how to implement command binding in ComponentOne FlexGrid for WPF using the Interactivity library.

Creating the MVVM Project

First, let's create a very simple MVVM project skeleton. Create a new WPF project "CommandBinding" and add three folders - View, Model and ViewModel. Then add a new class called “Employee” under the "Model" folder. This is our domain entity and contains a few properties.

namespace CommandBinding.Model 
{ 
 class Employee 
 { 
  public string FirstName { get; set; } 
  public string LastName { get; set; } 
  public int Age { get; set; } 
 } 
}

Add a class for ICommand Implementation called “DelegateCommand", to the folder "ViewModel".

namespace CommandBinding.ViewModel 
{ 
 class DelegateCommand : ICommand 
 { 
  private Action m_action; 
  public DelegateCommand(Action action) 
  { 
   this.m_action = action; 
  } 
  public bool CanExecute(object parameter) 
  { 
   return true; 
  } 
  public void Execute(object parameter) 
  { 
   m_action(); 
  } 
  public event EventHandler CanExecuteChanged; 
  public void OnCanExecuteChanged() 
  { 
   CanExecuteChanged(this, EventArgs.Empty); 
  } 
 } 
}

Add another class "EmployeeListView" to the folder "ViewModel". This View Model is responsible for sending data to and handling commands that get triggered in the View.

namespace CommandBinding.ViewModel 
{ 
 class EmployeeListView 
 { 
  private ICommand m_RowClickCommand; 
  public EmployeeListView() 
  { 
   m_RowClickCommand = new DelegateCommand(() => 
   { 
    var set = this.SelectedData; 
     if (set != null) 
     { 
      MessageBox.Show(set.FirstName,"First Name"); 
     } 
    }); 
   } 
   public Employee SelectedData { get; set; } 
   public ICommand RowClickCommand 
   { 
    get 
    { 
     return m_RowClickCommand; 
    } 
   } 
   public IList<Employee> EmployeeList 
   { 
    get 
    { 
     List<Employee> _list = new List<Employee>(); 
     _list.Add(new Employee() { FirstName = "John", LastName = "Wayne", Age = 35 }); 
     _list.Add(new Employee() { FirstName = "Maximus", LastName = "Decimus", Age = 33 }); 
     _list.Add(new Employee() { FirstName = "Alexander", LastName = "Conklin", Age = 42 }); 
     _list.Add(new Employee() { FirstName = "Jason", LastName = "Bourne", Age = 66 }); 
     return _list; 
    } 
   } 
  } 
}

Add FlexGrid with Command Binding

Next, add a reference to your project for C1.WPF.FlexGrid and System.Windows.Interactivity. You can browse and add these from nuget.org.

Lastly, drag MainWindow.xaml to the "View" folder. Open App.xaml and change "StartupUri" tag from "MainWindow.xaml" to "View/MainWindow.xaml".

Take a look at the XAML markup below for MainWindow.xaml where we place C1FlexGrid and set command bindings for the "MouseLeftButtonUp" event trigger using Interactivity.

<!--xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"-->


<Grid> 
  <Grid.DataContext> 
   <ViewModel:EmployeeListView /> 
  </Grid.DataContext>
    <c1:C1FlexGrid ItemsSource="{Binding EmployeeList}"
                SelectedItem="{Binding SelectedData, Mode=TwoWay}">
    <i:Interaction.Triggers> 
    <i:EventTrigger EventName="MouseLeftButtonUp"> 
     <i:InvokeCommandAction 
                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=c1:C1FlexGrid}, 
                        Path=DataContext.RowClickCommand}" /> 
    </i:EventTrigger> 
   </i:Interaction.Triggers> 
  </c1:C1FlexGrid> 
 </Grid>

And this is it! Now, when you click on any row, the row gets selected with a message box that displays the value of a field from the selected DataItem. Normally, this type of action would be performed using a code behind click event. But to make your app the most MVVM-friendly, we can avoid unmanaged code behind thanks to the Microsoft Interactivity library.

Download C# Sample