How to bind method to a HoverButton? - wpf

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>