The thoughts of a Touch MVP

Let’s face it: not everybody can afford a full-blown Surface unit in his or her house. But most of us can afford a windows 7 touch enabled computer. The prices for these kind of devices have dropped a lot since the introduction of Windows 7. Companies such as Dell, HP and others offer notebooks as well as desktop systems that can handle multi-touch for a reasonable price.

And with touch you’re halfway there. What you don’t have is the object recognition of the Surface. And the rigidity of the Surface unit (I wouldn’t recommend sitting on my HP multi-touch laptop). Or drop a cup of coffee on your Dell Inspiron One 2305. These machine won’t survive if you try that, whereas the Surface machine is designed to handle such abuse.

But… if you need a multitouch machine for, let’s say, a kiosk application these machines are more than capable enough. Or if you want such a machine to experience multi-touch development, well, they’re the perfect replacement for the Surface unit.

That takes care of the hardware. What about the software? Obviously, that’s where YOU come in. You are the one with the great ideas and the skills to develop those ideas into products. But you will be needing some help.

In the ‘old’ days, handling touch required a lot of Windows API calls, event hooks and other nasty stuff. With the introduction of .net 4.0 things got much easier: touch is now an integral part of the runtime (when the right hardware is there, of course). And now life gets even better: there is a version of the Surface toolkit available for Windows 7 / .net 4.0. You can download it here, and it just works…

The question is: what does this toolkit give you?

Well, in essence you’ll get all the controls and templates you also get when you install the full-blown Surface toolkit. Of course, you won’t get the object recognition stuff but the touch enabled controls are all there. This includes the ScatterView control.

Let’s start examining this toolkit a bit closer.

Surface Hello World

The Surface version of Hello World is an application that shows pictures and users can rotate, move and scale them. My personal record for writing this application is now 35 seconds, but when I get my new SSD drive I am sure I can do better than that.

It is always a nice demo to give because it shows the capabilities of the touch features of the Surface so well. So let’s port that application to Windows 7.

(BTW If you don’t have a Touch enabled device you can still download the toolkit and use it. You can run the demo’s but it won’t be as nice as with touch. However, the experience is not the same when you use a mouse instead of your fingers….)

Start by creating a new project. Depending on what you’ve got installed you will notice a new template in Visual Studio 2010:

As you can see there is a new category available (Surface) and a sub category Windows Touch. This includes a WPF Application (Surface) project template. Let’s pick that one (there’s nothing else to pick) and we’ll get a new project.

Basically this is just another WPF project with some additional references. But all the WPF rules still apply. You can open this project in Expression Blend if you want, you can edit the XAML, you can do whatever you want as long as it is valid in a WPF application.

The MainWindow however, is now called SurfaceWindow1.xaml. It has a new xml namespace in it, with the alias ‘s’.

We’ve added a ScatterView, set the ItemsSource to Images (we’ll deal with that later) and set the data template to be an image. The path to that image will be in the Images that serves as the ItemsSource.

Go to the code behind and we’ll add the Images collection that hold the paths to the images.

We’ve created a DependencyProperty here which we will use to bind the ScatterView to. It’s just an ObservableCollection<string> that will contain all the paths + filenames of the images we want to show.

We set the DataContext of the form to itself (so it can find the Images property), then we load all the sample picture Microsoft provides with Windows 7 into a string[]. That string[] is then the source for the new instance of our ObservableCollection<string>.

Run it and you’ll get something like this:

If you have a touchenabled device you can resize, rotate and move the images. If you don’t then all you can do is move the images about with the mouse, but it’s still pretty cool.

Next post I will cover the controls in this toolkit. But until then: happy touch-coding!