Question

I’ve been looking for hours but I can’t find anything useful. Any help appreciated!

I’m writing a Kinect application using WPF with the Coding4Fun toolkit and the MVVM pattern.

I’d like to put all my kinect related logic in my ViewModel and bind those methods to a HoverButton (found in the C4F toolkit).
A normal button had the ‘Command’ property, However the HoverButton does not.

So in short:

I want to bind the click event of a HoverButton to a method in my ViewModel.

My XAML:

<Window x:Class="KinectTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:fun="clr-namespace:Coding4Fun.Kinect.Wpf.Controls;assembly=Coding4Fun.Kinect.Wpf" Title="MainWindow" Height="350" Width="525"
    Loaded="WindowLoaded"
    Closed="WindowClosed"
    Cursor="None"
    >
<Grid Name="MainGrid" MouseMove="GridHoverMouseMove" DataContext="_viewModel">

    <Canvas Name="SkeletonCanvas" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Black">
        <fun:HoverButton Name="KinectUp" ImageSource="/Images/blue_glass.png" ActiveImageSource="/Images/blue_glass.png" ImageSize="100" Canvas.Top="26" TimeInterval="1000">

        </fun:HoverButton>
        <fun:HoverButton Name="KinectDown" ImageSource="/Images/red_glass.png" ActiveImageSource="/Images/red_glass.png" ImageSize="100" Canvas.Bottom="26" TimeInterval="1000"/>

    </Canvas>
    <Image Name="ColorImage" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="120" Height="120"></Image>
            <TextBlock Name="Notification" Foreground="White" FontSize="50" VerticalAlignment="Top" HorizontalAlignment="Stretch" TextAlignment="Center" Text="{Binding Path=Notification, Mode=TwoWay}"></TextBlock>
    <Canvas Name="CanvMouse" Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Image Name="imgMouse" Width="70" Source="/Images/handround_green.png"></Image>
    </Canvas>
</Grid>
</Window>

My ViewModel:

internal class MainViewModel : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;
    public ICommand KinectUpClick { get; private set; }
    public ICommand KinectDownClick { get; private set; }

    private string _notification = "Hello";
    public SensorHelper SensorHelper { get; set; }

    public string Notification
    {
        get { return _notification; }
        set
        {
            _notification = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Notification"));
        }
    }



    public MainViewModel()
    {
        KinectUpClick = new RelayCommand(PerformKinectUpClick, CanKinectUpClick);
        KinectDownClick = new RelayCommand(PerformKinectDownClick, CanKinectDownClick);

    }

    private bool CanKinectUpClick(object parameter)
    {
        return SensorHelper.CanMoveUp;
    }

    private bool CanKinectDownClick(object parameter)
    {
        return SensorHelper.CanMoveDown;
    }

    private void PerformKinectUpClick(object parameter)
    {

        ThreadPool.QueueUserWorkItem((o) =>
        {
            Notification = "Kinect goes up!";
            SensorHelper.MoveAngle(5);
            Notification = "Kinect ready...";
        });
    }

    private void PerformKinectDownClick(object parameter)
    {
        ThreadPool.QueueUserWorkItem((o) =>
        {
            Notification = "Kinect goes down!";
            SensorHelper.MoveAngle(-5);
            Notification = "Kinect ready...";
        });
        ;
    }
}
}

My Code-behind:

public partial class MainWindow : Window
{
    private readonly MainViewModel _viewModel;
    private SensorHelper _sensorHelper;

    public MainWindow()
    {
        InitializeComponent();
        _viewModel = new MainViewModel();
        MainGrid.DataContext = _viewModel;
    }

    private void WindowLoaded(object sender, RoutedEventArgs e)
    {
        try
        {
            _sensorHelper = new SensorHelper();
        }
        catch (Exception exception)
        {
            MessageBox.Show(exception.Message);
        }
        _viewModel.SensorHelper = _sensorHelper;
        _sensorHelper.InitializeSkeleton(ref SkeletonCanvas);
        //_sensorHelper.CaptureMouse(CanvMouse);
        _sensorHelper.InitializeColorFrame(ColorImage);
        _sensorHelper.StartKinect();
    }



    private void WindowClosed(object sender, EventArgs eventArgs)
    {
        _sensorHelper.StopKinect();
    }

    private void GridHoverMouseMove(object sender, MouseEventArgs e)
    {
        imgMouse.SetValue(Canvas.LeftProperty, e.GetPosition(CanvMouse).X - imgMouse.ActualWidth/2);
        imgMouse.SetValue(Canvas.TopProperty, e.GetPosition(CanvMouse).Y - imgMouse.ActualHeight/2);

        MouseHelper.CheckButton(KinectUp, imgMouse);
        MouseHelper.CheckButton(KinectDown, imgMouse);
    }
}

Answer 1

Okay, very simple, what you’ll have to do is bind an ICommand/Command to an Event by using an EventToCommand which can be found in the MVVMLight Toolkit.

You can use Blend for that as well

Simple example :

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
    x:Class="TestProject.Window5"
    x:Name="Window"
    Title="Window5"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Button Content="Button" HorizontalAlignment="Left" Height="69" Margin="92,117,0,0" VerticalAlignment="Top" Width="206">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Kinect.MyCommand, Source={StaticResource Locator}}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>