Keyboard events in a WPF MVVM application?

Question

How can I handle the Keyboard.KeyDown event without using code-behind? We are trying to use the MVVM pattern and avoid writing an event handler in code-behind file.

Answer 1

Short answer is you can't handle straight keyboard input events without code-behind, but you can handle InputBindings with MVVM (I can show you a relevant example if this is what you need).

Can you provide more information on what you want to do in the handler?

Code-behind isn't to be avoided entirely with MVVM. It's simply to be used for strictly UI-related tasks. A cardinal example would be having some type of 'data entry form' that, when loaded, needs to set focus to the first input element (text box, combobox, whatever). You would commonly assign that element an x:Name attribute, then hook up the Window/Page/UserControl's 'Loaded' event to set focus to that element. This is perfectly ok by the pattern because the task is UI-centric and has nothing to do with the data it represents.

Answer 2

I currently have a virtual keyboard which is just a Grid with buttons that are bound to an ICommand in a KeyboardViewModel class. Now I need to also take the input from the real keyboard and I was wondering how to get those 'key pressed' events to the ViewModel class. I thought that maybe there was a way, in the XAML, to bind the keyboard events to the same or another ICommand in the KeyboardViewModel class. Maybe the only way is to add keyboard event handlers to the code-behind and from there directly call the method in the ViewModel.

I am new at WPF and MVVM. I will look into InputBindings and see if it's something I can use. Thanks Adrian.

Answer 3

I do this by using an attached behaviour with 3 dependency properties; one is the command to execute, one is the parameter to pass to the command and the other is the key which will cause the command to execute. Here's the code:

public static class CreateKeyDownCommandBinding
{
    /// <summary>
    /// Command to execute.
    /// </summary>
    public static readonly DependencyProperty CommandProperty =
     DependencyProperty.RegisterAttached("Command",
     typeof(CommandModelBase),
     typeof(CreateKeyDownCommandBinding),
     new PropertyMetadata(new PropertyChangedCallback(OnCommandInvalidated)));

    /// <summary>
    /// Parameter to be passed to the command.
    /// </summary>
    public static readonly DependencyProperty ParameterProperty =
     DependencyProperty.RegisterAttached("Parameter",
     typeof(object),
     typeof(CreateKeyDownCommandBinding),
     new PropertyMetadata(new PropertyChangedCallback(OnParameterInvalidated)));

    /// <summary>
    /// The key to be used as a trigger to execute the command.
    /// </summary>
    public static readonly DependencyProperty KeyProperty =
     DependencyProperty.RegisterAttached("Key",
     typeof(Key),
     typeof(CreateKeyDownCommandBinding));

    /// <summary>
    /// Get the command to execute.
    /// </summary>
    /// <param name="sender"></param>
    /// <returns></returns>
    public static CommandModelBase GetCommand(DependencyObject sender)
    {
     return (CommandModelBase)sender.GetValue(CommandProperty);
    }

    /// <summary>
    /// Set the command to execute.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="command"></param>
    public static void SetCommand(DependencyObject sender, CommandModelBase command)
    {
     sender.SetValue(CommandProperty, command);
    }

    /// <summary>
    /// Get the parameter to pass to the command.
    /// </summary>
    /// <param name="sender"></param>
    /// <returns></returns>
    public static object GetParameter(DependencyObject sender)
    {
     return sender.GetValue(ParameterProperty);
    }

    /// <summary>
    /// Set the parameter to pass to the command.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="parameter"></param>
    public static void SetParameter(DependencyObject sender, object parameter)
    {
     sender.SetValue(ParameterProperty, parameter);
    }

    /// <summary>
    /// Get the key to trigger the command.
    /// </summary>
    /// <param name="sender"></param>
    /// <returns></returns>
    public static Key GetKey(DependencyObject sender)
    {
     return (Key)sender.GetValue(KeyProperty);
    }

    /// <summary>
    /// Set the key which triggers the command.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="key"></param>
    public static void SetKey(DependencyObject sender, Key key)
    {
     sender.SetValue(KeyProperty, key);
    }

    /// <summary>
    /// When the command property is being set attach a listener for the
    /// key down event.  When the command is being unset (when the
    /// UIElement is unloaded for instance) remove the listener.
    /// </summary>
    /// <param name="dependencyObject"></param>
    /// <param name="e"></param>
    static void OnCommandInvalidated(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
     UIElement element = (UIElement)dependencyObject;
     if (e.OldValue == null && e.NewValue != null)
     {
      element.AddHandler(UIElement.KeyDownEvent,
       new KeyEventHandler(OnKeyDown), true);
     }

     if (e.OldValue != null && e.NewValue == null)
     {
      element.RemoveHandler(UIElement.KeyDownEvent,
       new KeyEventHandler(OnKeyDown));
     }
    }

    /// <summary>
    /// When the parameter property is set update the command binding to
    /// include it.
    /// </summary>
    /// <param name="dependencyObject"></param>
    /// <param name="e"></param>
    static void OnParameterInvalidated(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
     UIElement element = (UIElement)dependencyObject;
     element.CommandBindings.Clear();

     // Setup the binding
     CommandModelBase commandModel = e.NewValue as CommandModelBase;
     if (commandModel != null)
     {
      element.CommandBindings.Add(new CommandBinding(commandModel.Command,
      commandModel.OnExecute, commandModel.OnQueryEnabled));
     }
    }

    /// <summary>
    /// When the trigger key is pressed on the element, check whether
    /// the command should execute and then execute it.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    static void OnKeyDown(object sender, KeyEventArgs e)
    {
     UIElement element = sender as UIElement;
     Key triggerKey = (Key)element.GetValue(KeyProperty);

     if (e.Key != triggerKey)
     {
      return;
     }

     CommandModelBase cmdModel = (CommandModelBase)element.GetValue(CommandProperty);
     object parameter = element.GetValue(ParameterProperty);
     if (cmdModel.CanExecute(parameter))
     {
      cmdModel.Execute(parameter);
     }
     e.Handled = true;
    }
}

To use this from xaml you can do something like this:

<TextBox framework:CreateKeyDownCommandBinding.Command="{Binding MyCommand}">
    <framework:CreateKeyDownCommandBinding.Key>Enter</framework:CreateKeyDownCommandBinding.Key>
</TextBox>

Edit: CommandModelBase is a base class I use for all commands. It's based on the CommandModel class from Dan Crevier's article on MVVM (here). Here's the source for the slightly modified version I use with CreateKeyDownCommandBinding:

public abstract class CommandModelBase : ICommand
    {
        RoutedCommand routedCommand_;

        /// <summary>
        /// Expose a command that can be bound to from XAML.
        /// </summary>
        public RoutedCommand Command
        {
            get { return routedCommand_; }
        }

        /// <summary>
        /// Initialise the command.
        /// </summary>
        public CommandModelBase()
        {
            routedCommand_ = new RoutedCommand();
        }

        /// <summary>
        /// Default implementation always allows the command to execute.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void OnQueryEnabled(object sender, CanExecuteRoutedEventArgs e)
        {
            e.CanExecute = CanExecute(e.Parameter);
            e.Handled = true;
        }

        /// <summary>
        /// Subclasses must provide the execution logic.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void OnExecute(object sender, ExecutedRoutedEventArgs e)
        {
            Execute(e.Parameter);
        }

        #region ICommand Members

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

        public event EventHandler CanExecuteChanged;

        public abstract void Execute(object parameter);

        #endregion
    }

Comments and suggestions for improvements would be very welcome.

Answer 4

I looked into that issue a few months ago, and I wrote a markup extension that does the trick. It can be used like a regular binding :

<Window.InputBindings>
    <KeyBinding Key="E" Modifiers="Control" Command="{input:CommandBinding EditCommand}"/>
</Window.InputBindings>

The full source code for this extension can be found here :

http://tomlev2.wordpress.com/2009/03/17/wpf-using-inputbindings-with-the-mvvm-pattern/

Please be aware that this workaround is probably not very "clean", because it uses some private classes and fields through reflection...

Answer 5

A little late, but here goes.

Microsoft's WPF Team recently released an early version of their WPF MVVM Toolkit . In it, you'll find a class called CommandReference that can handle things like keybindings. Look at their WPF MVVM template to see how it works.

Answer 6

WOW - there's like a thousand answers and here I'm going to add another one..

The really obvious thing in a 'why-didn't-I-realise-this-forehead-slap' kind of way is that the code-behind and the ViewModel sit in the same room so-to-speak, so there is no reason why they're not allowed to have a conversation.

If you think about it, the XAML is already intimately coupled to the ViewModel's API, so you might just as well go and make a dependency on it from the code behind.

The other obvious rules to obey or ignore still applies (interfaces, null checks <-- especially if you use Blend...)

I always make a property in the code-behind like this:

private ViewModelClass ViewModel { get { return DataContext as ViewModelClass; } }

This is the client-code. The null check is for helping control hosting as like in blend.

void someEventHandler(object sender, KeyDownEventArgs e)
{
    if (ViewModel == null) return;
    /* ... */
    ViewModel.HandleKeyDown(e);
}

Handle your event in the code behind like you want to (UI events are UI-centric so it's OK) and then have a method on the ViewModelClass that can respond to that event. The concerns are still seperated.

ViewModelClass
{
    public void HandleKeyDown(KeyEventArgs e) { /* ... */ }
}

All these other attached properties and voodoo is very cool and the techniques are really useful for some other things, but here you might get away with something simpler...

Answer 7

"what is CommandModelBase?"

I have that question as well. This is the only thing that is missing in order to make the given code work.