Search code examples
c#wpfmvvmdata-bindingicommand

Use ICommand to change the state of the ViewModel


I would like to use ICommand to change the Paddle1.Y int value of my ViewModel. Am I supposed to create a class implementing ICommand interface? I have done that. But since it is a class, it doesn't have access to my ViewModel's Paddle1 property without creating a property for it. I would prefer to create the command within my ViewModel for this reason. At this point I'm trying to pass the Paddle1 to the Command as a CommandParameter in XAML. I am failing at this, and I'm not sure it is the cleanest approach to editing the state of my ViewModel either.

Could I get a code example of my UpKeyPressed command being bound to either a button or the keyboard up key? With no CommandParameter would be more clean, if the command could access my ViewModel Paddle1 property.

My ViewModel:

namespace Pong.Core.ViewModels
{
    public class GamePlayViewModel
    {
        private readonly Paddle Paddle1;
        private Paddle Paddle2;

        public GamePlayViewModel()
        {
            Paddle1 = new Paddle();
            Paddle2 = new Paddle();
            UpKeyPressed();
        }

        public ICommand UpKeyPressed()
        {
            var r = new UpKeyPressed();
            r.Execute(Paddle1);
            return r;
        }
    }

    public class UpKeyPressed : ICommand
    {
        public void Execute(object parameter)
        {
            var paddle = parameter as Paddle;
            Debug.Assert(paddle != null, "paddle != null");
            paddle.IncreaseY();
            Debug.WriteLine(paddle.Y);
        }

        public bool CanExecute(object parameter)
        {
            return parameter != null;
        }
        public event EventHandler CanExecuteChanged;
    }
}

My XAML page that uses the viewmodel as a dataContext:

<Window x:Class="Pong.Windows.Views.GamePlayView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Pong.Core.ViewModels;assembly=Pong.Core"
        Title="GamePlayView" Height="350" Width="525">
    <Grid>

        <Button CommandParameter="{Binding ElementName=Paddle1}" 
                Command="{StaticResource UpKeyPressed}"  >
            Click
        </Button>


    </Grid>
    <Window.DataContext>
        <local:GamePlayViewModel/>
    </Window.DataContext>
    <Window.InputBindings>
        <KeyBinding Command="{Binding Path=UpKeyPressed}" 
                Key="O" 
                Modifiers="Control"/>
    </Window.InputBindings>
</Window>

Data structure of my solution

enter image description here

My attempt to fix:

    namespace Pong.Core.ViewModels
{
    public class GamePlayViewModel
    {
        private readonly Paddle Paddle1;
        private Paddle Paddle2;

        private ICommand _doSomething;

        public ICommand DoSomethingCommand
        {
            get
            {
                if (_doSomething == null)
                {
                    _doSomething = new UpKeyPressed(Paddle1);
                }
                return _doSomething;
            }
        }


        public GamePlayViewModel()
        {
            Paddle1 = new Paddle();
            Paddle2 = new Paddle();
        }
    }

    public class UpKeyPressed : ICommand
    {
        private Paddle Paddle1;

        public UpKeyPressed(Paddle paddle)
        {
            Paddle1 = paddle;
        }

        public void Execute(object parameter)
        {
            //var paddle = parameter as Paddle;
            //Debug.Assert(paddle != null, "paddle != null");
            //paddle.IncreaseY();
            Paddle1.IncreaseY();
            //Debug.WriteLine(paddle.Y);
            Debug.WriteLine(Paddle1.Y);
        }

        public bool CanExecute(object parameter)
        {
            return Paddle1 != null;
        }

        public event EventHandler CanExecuteChanged;
    }
}

XAML attempt (no errors but not workling upon pressing the 'O' key):

<Window x:Class="Pong.Windows.Views.GamePlayView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewModels="clr-namespace:Pong.Core.ViewModels;assembly=Pong.Core"
    Title="GamePlayView" Height="350" Width="525">
<Grid>


</Grid>
<Window.DataContext>
    <viewModels:GamePlayViewModel/>
</Window.DataContext>
<Window.InputBindings>
    <KeyBinding Command="{Binding DoSomethingCommand}" 
        Key="O" 
        Modifiers="Control"/>
</Window.InputBindings>


Solution

  • Looked at your attempt, there are some things we need to be fix, first your CanExecute should not involve the parameter anymore:

    public bool CanExecute(object parameter) {
       return Paddle1 != null;
    }
    

    Secondly your XAML binding is wrong, you already have DataContext of your view-model flown in your visual tree, you just need a simple Binding with some Path specified like this:

    <KeyBinding Command="{Binding DoSomethingCommand}" 
                Key="O" 
                Modifiers="Control"/>