All for .net, .net for all!

Kinect Interaction with WPF Part II: Getting Started Easier

VBandi's blog



Generic Content

In the previous post of this series, I have introduced the Kinect for Windows SDK 1.7, and the key controls and concepts within its Kinect Interactions toolkit. If you have followed through that post, you have seen all the work and code you need to get the basics running. Most of the initialization code was biolerplate, and code that you can easily copy and paste into your own project.

I have packaged up the initialization code into a UserControl called KinectChooserEx, and wired up a couple of dependency properties.

Note: I could have inherited from KinectChooser instead of packaging it into a user control. But I ran into some serious strong name issues, and wanted more consistent naming for the properties, so it was better to hide some internal workings.

The NearMode property is a boolean value, and can be used to turn Near Mode on and off. Changing Near Mode also sets the EnableTrackingInNearRange of the SkeletonStream. You will probably want to keep NearMode as false if you are using a Kinect for XBox sensor instead of a Kinect for Windows one. Otherwise the interaction engine works better at close range, so I have set NearMode to be true by default.

The other property is KinectSensor, which contains null if no sensor is initialized, or a KinectSensor object if one is.

Both of these properties are bindable. With KinectChooserEx, you can finally get started with your own Kinect project purely in Blend, without writing a single line of code (at least for the interaction part). Here is a step by step tutorial on how to do this:

Create a New Project and Add KinectChooserEx.xaml and KinectChooserEx.xaml.cs

Create a new WPF project, and add the necessary references as described in my previous post. Drag and drop the KinectChooserEx.xaml and KinectChooserEx.xaml.cs files from Explorer into the project. You will also want to add the KinectInteraction170_32.dll and KinectInteraction170_64.dll files at this point (again, see my previous post).


Make sure that the project compiles.

Add KinectChooserEx to the MainPage

You should be able to find the KinectChooserEx user control in Blend now. Press CTRL+. or the >> button on the left toolbar to bring up the Assets panel. If you start typing “Kinect”, you should see the KinectChooserEx control:


Drag and drop it onto the design surface.


Position it so that it looks a bit better. I am setting the HorizontalAlignment and VerticalAlignment properties so that the control will have adequate space to expand (remember, if you move the mouse over it, KinectChooser shows error status and explanation).


You should also see a new Property Category called “Kinect”, with a lonely NearMode property, set to true by default:


Adding a KinectRegion

As I showed in the last post, the KinectRegion control is the heart of the entire Kinect Interaction experience. So, let’s add one of these to our project. Again, just add it from the Assets panel, and place it so that it occupies most of the screen:


To make the KinectRegion work, it needs a KinectSensor object. This is what KinectChooserEx can provide, so let’s wire up this binding. Select the KinectRegion control, find its KinectSensor property, and click the little property peg:


Select Bind to Element and click on the KinectChooserEx control in either the designer area or the Object tree. Blend automatically chooses the KinectChooserEx’s KinectSensor property, since it has the right type. All we have to do is press the OK button.


Adding a KinectUserViewer control

Similarly, we can add a KinectUserViewer control to the application. I have added it above the KinectRegion, so that the hand cursor will be in front of the user’s silhouette – but otherwise I allowed to take up the entire screen. It is up to you – you may want to put it into the top, or one of the corners.

You have to bind the KinectUserViewer control’s KinectRegion property to the KinectRegion we created earlier. Binding the KinectSensor property will not work. Unfortunately, it seems like the KinectRegion property is not shown in Blend, so we have to do this part manually in XAML.

First, let’s add a name to the KinectRegion control. I called it “region” for now.


Next, select the KinectUserViewer control, and open the split view. Type the following within the XAML tag:

k:KinectRegion.KinectRegion="{Binding ElementName=region}"

So, the entire XAML tag looks like this:


Let’s See it Work!

Press F5, and Blend should launch the application. If all is well, you should see something like this:


If the application does not start or crash, please load the solution up in Visual Studio and check the error message. The first post in this series has some troubleshooting info for the most common issues.

Using the Near Mode

For fun, we can add a checkbox that controls the Near Mode of the Kinect Sensor. All you have to do is bind its IsChecked property to the NearMode property of the KinectChooserEx control, and make sure the binding is set to be a TwoWay binding:


Now you can control whether you want near mode on or off.



As you can see above, when near mode is off, it cannot detect my left hand anymore even though I moved it back a bit between the two screenshots.


I hope you will find this little Blend + Kinect tutorial and the KinectChooserEx control useful. Feel free to enhance it, add more properties, features, bugfixes, etc. You can download the code from here (it also contains the project from the previous article). Please keep the feedback coming!

Posted Apr 19 2013, 04:27 PM by vbandi


Kinect Interaction with WPF Part II: Getting Started Easier wrote Kinect Interaction with WPF Part II: Getting Started Easier
on Mon, Apr 22 2013 13:05

Pingback from  Kinect Interaction with WPF Part II: Getting Started Easier

Dew Drop – April 22, 2013 (#1,532) | Alvin Ashcraft's Morning Dew wrote Dew Drop – April 22, 2013 (#1,532) | Alvin Ashcraft's Morning Dew
on Mon, Apr 22 2013 14:56

Pingback from  Dew Drop – April 22, 2013 (#1,532) | Alvin Ashcraft's Morning Dew

App’ WPF pour Kinect Tutoriel | Mon Dev Perso wrote App’ WPF pour Kinect Tutoriel | Mon Dev Perso
on Tue, Jan 7 2014 23:54

Pingback from  App’ WPF pour Kinect Tutoriel | Mon Dev Perso

Working with Kinect 3D Sensor in Robotics - Setup, Tutorials, Applications -Into Robotics wrote Working with Kinect 3D Sensor in Robotics - Setup, Tutorials, Applications -Into Robotics
on Wed, Apr 30 2014 20:17

Pingback from  Working with Kinect 3D Sensor in Robotics - Setup, Tutorials, Applications -Into Robotics