Silverlight 4 + MVVM + KeyDown event

Question

I'm trying to build a sample game in Silverlight 4 using the MVVM design pattern to broaden my knowledge. I'm using Laurent Bugnion's MvvmLight toolkit as well (found here: http://mvvmlight.codeplex.com/ ). All I want to do right now is move a shape around within a Canvas by pressing specific keys. My solution contains a Player.xaml (just a rectangle; this will be moved around) and MainPage.xaml (the Canvas and an instance of the Player control).

To my understanding, Silverlight doesn't support tunneling routed events, only bubbling. My big problem is that Player.xaml never recognizes the KeyDown event. It's always intercepted by MainPage.xaml first and it never reaches any child controls because it bubbles upward. I'd prefer that the logic to move the Player be in the PlayerViewModel class, but I don't think the Player can know about any KeyDown events firing without me explicitly passing them on down from the MainPage.

I ended up adding the handler logic to the MainPageViewModel class. Now my problem is that the MainPageViewModel has no knowledge of Player.xaml so it cannot move this object when handling KeyDown events. I guess this is expected, as ViewModels should not have any knowledge of their associated Views.

In not so many words...is there a way this Player user control within my MainPage.xaml can directly accept and handle KeyDown events? If not, what's the ideal method for my MainPageViewModel to communicate with its View's child controls? I'm trying to keep code out of the code-behind files as much as possible. Seems like it's best to put logic in the ViewModels for ease of testing and to decouple UI from logic.

(MainPage.xaml)

<UserControl x:Class="MvvmSampleGame.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:game="clr-namespace:MvvmSampleGame"             
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"
         mc:Ignorable="d"
         Height="300"
         Width="300"
         DataContext="{Binding Main, Source={StaticResource Locator}}">

<i:Interaction.Triggers>
    <i:EventTrigger EventName="KeyDown">
        <cmd:EventToCommand Command="{Binding KeyPressCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

<Canvas x:Name="LayoutRoot">       
    <game:Player x:Name="Player1"></game:Player> 
</Canvas>

(MainViewModel.cs)

public MainViewModel()
{

  KeyPressCommand = new RelayCommand<KeyEventArgs>(KeyPressed);

}       

public RelayCommand<KeyEventArgs> KeyPressCommand
{
    get;
    private set;
}

private void KeyPressed(KeyEventArgs e)
{

        if (e.Key == Key.Up || e.Key == Key.W)
        {
            // move player up

        }
        else if (e.Key == Key.Left || e.Key == Key.A)
        {
            // move player left
        }
        else if (e.Key == Key.Down || e.Key == Key.S)
        {
            // move player down
        }
        else if (e.Key == Key.Right || e.Key == Key.D)
        {
            // move player right
        }
}

Thanks in advance, Jeremy

Answer 1

Hi,

Instead of using the EventTrigger, try to use the KeyTrigger and set the Source object to be the LayoutRoot.

Another option (which I think is better) is to let the ViewModel handle the position of the player. For example, have a property called PlayerTop and a property named PlayerLeft. Bind the PLayer's Canvas.Top and Canvas.Left property to these. When the user presses the Keys, a command is executed on the VM which updates these properties. This way the VM does not have to know what is moved, or how it is moved.

Does that make sense?