Convert Event into Command in MVVM Model

Sometimes we need to handle the event in the view model. One simple approach is to introduce event properties in ViewModel and set it from the view as we saw in this example. Another approach is to convert event into command and use the command binding. In this method we are creating attach properties of ICommand type which calls the command whenever that event occurs.

First take a look at our program without any command binding. We are using MVVM and here is our ViewModel class.

Code Snippet

public class MyViewMode : INotifyPropertyChanged
{
    private ObservableCollection<string> _states;

    public MyViewMode()
    {
        _states = new ObservableCollection<string>();

        _states.Add("Maryland");
        _states.Add("Taxes");
        _states.Add("Virginia");
        _states.Add("Washington");

        SelectionChanged = new MyCommand(HandleSelectionChangeEvent);
    }

    public ObservableCollection<string> States
    {
        get
        {
            return _states;
        }
        set
        {
            _states = value;
            RaisePropertyChanged("States");
        }
    }

    public ICommand SelectionChanged
    { get; set; }

    public void HandleSelectionChangeEvent(string value)
    {
        MessageBox.Show(value);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = this.PropertyChanged;

        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

 

We don’t have a separate Model class, because our data is list of string (in fact ObservableCollection of string) and we initilized it inside the ViewModel. We created one ICommand type property and create one method to handle that command. Here we are using MessageBox inside the ViewModel, which is just for simplicity purpose, in a proper ViewModel we shouldn’t have any user interface element inside ViewModel.

Our view class is very simple just create a ViewModel and assign it into DataContext.

Code Snippet

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        DataContext = new MyViewMode();
    }
}

 

Our implementation of ICommand interface is very simple we are not doing any fancy stuff here and just give the minimal implementation of it. Here is our ICommnad interface implementation.

Code Snippet

public class MyCommand : ICommand
{
    public Action<string> action
    { get; set; }

    public MyCommand()
    {

    }

    public MyCommand(Action<string> _action)
    {
        action = _action;
    }

    public bool CanExecute(object parameter)
    {
        if (action != null)
        {
            return true;
        }

        return false;
    }

    public void Execute(object parameter)
    {
        if (action != null)
        {
            action(parameter.ToString());
        }
    }

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

 

If we run this program then it display the name of states in listbox (if we define listbox in XAML and set its items source property to States property of ViewModel). Now we are going to handle the Event and convert it into Command.

To do this we are going to create one class named ListBoxBehavior and define Attached dependency property in it. We already saw the attached properties here. We have to write as many attached dependency properties as many events we want to handle. In our example we are going to handle only one event.

Code Snippet

public class ListBoxBehavior
{
    public static readonly DependencyProperty SelectionChangedCommandProperty =
        DependencyProperty.RegisterAttached("SelectionChangedCommand",
        typeof(ICommand), typeof(ListBoxBehavior));

    public static void SetSelectionChangedCommand(UIElement obj, ICommand value)
    {
        obj.SetValue(SelectionChangedCommandProperty, value);
    }

    public static ICommand GetSelectionChangedCommand(UIElement obj)
    {
        return (ICommand)obj.GetValue(SelectionChangedCommandProperty);
    }
}

In next step we are going to add two fields in this class one for dependency property type and other for routed event.

Code Snippet

public class ListBoxBehavior
{
    private static DependencyProperty _property;
    private static readonly RoutedEvent _selectionChangedEvent = ListBox.SelectionChangedEvent;

    public static readonly DependencyProperty SelectionChangedCommandProperty =
        DependencyProperty.RegisterAttached("SelectionChangedCommand",
        typeof(ICommand), typeof(ListBoxBehavior));

    public static void SetSelectionChangedCommand(UIElement obj, ICommand value)
    {
        obj.SetValue(SelectionChangedCommandProperty, value);
    }

    public static ICommand GetSelectionChangedCommand(UIElement obj)
    {
        return (ICommand)obj.GetValue(SelectionChangedCommandProperty);
    }
}

 

Note that the event we want to handle is stored in our field, in our example it is SelectionChanged event define in the base class of ListBox. Then we are going to define the PropertyMetaData for Attached property. The main reason to define meta data is to define the callback method. Here is updated version of our program now.

Code Snippet

public class ListBoxBehavior
{
    private static DependencyProperty _property;
    private static readonly RoutedEvent _selectionChangedEvent = ListBox.SelectionChangedEvent;

    public static readonly DependencyProperty SelectionChangedCommandProperty =
        DependencyProperty.RegisterAttached("SelectionChangedCommand",
        typeof(ICommand), typeof(ListBoxBehavior),
        new PropertyMetadata(new PropertyChangedCallback(SelectionChangedCallBack)));

    public static void SetSelectionChangedCommand(UIElement obj, ICommand value)
    {
        obj.SetValue(SelectionChangedCommandProperty, value);
    }

    public static ICommand GetSelectionChangedCommand(UIElement obj)
    {
        return (ICommand)obj.GetValue(SelectionChangedCommandProperty);
    }

    static void SelectionChangedCallBack(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
    }
}

 

This callback method perform the trick. This callback function add the event handler for our event which calls whenever that event occurs and that handler is going to call our command method. Here is our callback method.

Code Snippet

static void SelectionChangedCallBack(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
    UIElement element = obj as UIElement;

    _property = args.Property;

    if (element != null)
    {
        if (args.OldValue != null)
        {
            element.AddHandler(_selectionChangedEvent, new RoutedEventHandler(EventHandler));
        }

        if (args.NewValue != null)
        {
            element.AddHandler(_selectionChangedEvent, new RoutedEventHandler(EventHandler));
        }
    }
}

 

This callback method register one method name EventHandler. Inside our EventHandler method we are getting the command from the dependency property (which we set from the XAML) and execute the command. Here is a code of our EventHandler.

Code Snippet

public static void EventHandler(object sender, RoutedEventArgs e)
{
    DependencyObject obj = sender as DependencyObject;

    if (obj != null)
    {
        ICommand command = obj.GetValue(_property) as ICommand;

        if (command != null)
        {
            if (command.CanExecute(e))
            {
                ListBox lb = e.OriginalSource as ListBox;

                if (lb != null)
                {
                    command.Execute(lb.SelectedItem);
                }
            }
        }
    }
}

 

Here is our XAML code, which is quite straight forward.

Code Snippet

<Window x:Class="WpfEventToCommand.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfEventToCommand"
        Title="Event To Command" Height="350" Width="525">
    <Grid>
        <ListBox Margin="5" ItemsSource="{Binding States}" HorizontalContentAlignment="Stretch"
                 local:ListBoxBehavior.SelectionChangedCommand="{Binding SelectionChanged}">
        </ListBox>
    </Grid>
</Window>

 

In XAML we are using the attach dependency property of ListBoxBehavior class and assign our ICommand property to it and perform command binding.

Here is our complete C# code.

Code Snippet

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfEventToCommand
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MyViewMode();
        }
    }

    public class MyViewMode : INotifyPropertyChanged
    {
        private ObservableCollection<string> _states;

        public MyViewMode()
        {
            _states = new ObservableCollection<string>();

            _states.Add("Maryland");
            _states.Add("Taxes");
            _states.Add("Virginia");
            _states.Add("Washington");

            SelectionChanged = new MyCommand(HandleSelectionChangeEvent);
        }

        public ObservableCollection<string> States
        {
            get
            {
                return _states;
            }
            set
            {
                _states = value;
                RaisePropertyChanged("States");
            }
        }

        public ICommand SelectionChanged
        { get; set; }

        public void HandleSelectionChangeEvent(string value)
        {
            MessageBox.Show(value);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;

            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class MyCommand : ICommand
    {
        public Action<string> action
        { get; set; }

        public MyCommand()
        {

        }

        public MyCommand(Action<string> _action)
        {
            action = _action;
        }

        public bool CanExecute(object parameter)
        {
            if (action != null)
            {
                return true;
            }

            return false;
        }

        public void Execute(object parameter)
        {
            if (action != null)
            {
                action(parameter.ToString());
            }
        }

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

    public class ListBoxBehavior
    {
        private static DependencyProperty _property;
        private static readonly RoutedEvent _selectionChangedEvent = ListBox.SelectionChangedEvent;

        public static readonly DependencyProperty SelectionChangedCommandProperty =
            DependencyProperty.RegisterAttached("SelectionChangedCommand",
            typeof(ICommand), typeof(ListBoxBehavior),
            new PropertyMetadata(new PropertyChangedCallback(SelectionChangedCallBack)));

        public static void SetSelectionChangedCommand(UIElement obj, ICommand value)
        {
            obj.SetValue(SelectionChangedCommandProperty, value);
        }

        public static ICommand GetSelectionChangedCommand(UIElement obj)
        {
            return (ICommand)obj.GetValue(SelectionChangedCommandProperty);
        }

        static void SelectionChangedCallBack(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            UIElement element = obj as UIElement;

            _property = args.Property;

            if (element != null)
            {
                if (args.OldValue != null)
                {
                    element.AddHandler(_selectionChangedEvent, new RoutedEventHandler(EventHandler));
                }

                if (args.NewValue != null)
                {
                    element.AddHandler(_selectionChangedEvent, new RoutedEventHandler(EventHandler));
                }
            }
        }

        public static void EventHandler(object sender, RoutedEventArgs e)
        {
            DependencyObject obj = sender as DependencyObject;

            if (obj != null)
            {
                ICommand command = obj.GetValue(_property) as ICommand;

                if (command != null)
                {
                    if (command.CanExecute(e))
                    {
                        ListBox lb = e.OriginalSource as ListBox;

                        if (lb != null)
                        {
                            command.Execute(lb.SelectedItem);
                        }
                    }
                }
            }
        }
    }
}

 

Now whenever we change the selection in list box it will display a message box with the value of newly selected item. The only violation of MVVM in this example is using MessageBox inside the ViewModel, but that is just for illustration purpose, we can do other useful stuff inside that method.