Windows 7 Multitouch Application Development (Part - I)

Kunal2383
Posted by in WPF category on for Beginner level | Views : 13139 red flag
Rating: 4.33 out of 5  
 3 vote(s)

Windows 7 came up with lots of goodies including better resource management, better performance, jumplist management, multitouch functionality & many more. Here I will discuss on developing a simple multitouch application using .Net 3.5 SP1.


 Download source code for Windows 7 Multitouch Application Development (Part - I)

Introduction
Windows 7 came up with lots of goodies including better resource management, better performance, jumplist management, multitouch functionality & many more. Here I will discuss on developing a simple multitouch application using .Net 3.5 SP1. 

Prerequisite
Before doing anything you have to download the Windows 7 Multitouch API. You can download it from here. Extract the downloaded zip file to your local hard drive. Be sure that, you are using Windows 7 & you have a multitouch enabled screen to test it out. 

XAML Implementation

Create a WPF application using Visual Studio 2008. This will automatically add a XAML file named Window1.xaml for you. Now add an image to your solution directory & insert it in the XAML. Now your Window1.xaml will look something like this: 

<Grid>
<Image Source="images/Hydrangeas.jpg"/>
</
Grid>

Add RenderTransform to the image so that, we can scale or rotate the image properly. This will produce XAML similar to this: 

<Grid>
<
Image Source="images/Hydrangeas.jpg" RenderTransformOrigin="0.5,0.5" Width="400">
<
Image.RenderTransform>
<
TransformGroup>
<
ScaleTransform x:Name="trScale" ScaleX="1" ScaleY="1"/>
<
RotateTransform x:Name="trRotate" Angle="0"/>
<
TranslateTransform x:Name="trTranslate" X="0" Y="0"/>
<
SkewTransform AngleX="0" AngleY="0"/>
</
TransformGroup>
</
Image.RenderTransform>
</
Image>
</
Grid>

Use proper names when you are adding different types of transform to the transform group. It will be easier for you to handle it from the code behind file. Run your application. This will open up your Window with an image inside it. If you want to drag or rotate the image this will not work because we haven’t integrated the functionality yet.


Code Implementation

Add two project references i.e. “Windows7.Multitouch” & “Windows7.Multitouch.WPF” from the extracted zip folder to your solution. These are the managed API codes for multitouch application development. Go to your Window1.xaml.cs & be sure that following namespaces are already included. You may have to add some of them. 
using System; 
using System.Windows;
using Windows7.Multitouch;
using Windows7.Multitouch.Manipulation;
using Windows7.Multitouch.WPF;

Create two private members inside your partial class: 

// object of a .Net Wrapper class for processing multitouch manipulation 
private ManipulationProcessor manipulationProcessor = new ManipulationProcessor(ProcessorManipulations.ALL);

// boolean value to check whether you have a multitouch enabled screen
private static bool IsMultitouchEnabled = TouchHandler.DigitizerCapabilities.IsMultiTouchReady;

Now inside the Window Loaded event write the following lines of code: 

// check to see whether multitouch is enabled 
if (IsMultitouchEnabled)
{
// enables stylus events for processor manipulation
Factory.EnableStylusEvents(this);

// add the stylus events
StylusDown += (s, e) =>
{
manipulationProcessor.ProcessDown((uint)e.StylusDevice.Id, e.GetPosition(this).ToDrawingPointF());
};
StylusUp += (s, e) =>
{
manipulationProcessor.ProcessUp((uint)e.StylusDevice.Id, e.GetPosition(this).ToDrawingPointF());
};
StylusMove += (s, e) =>
{
manipulationProcessor.ProcessMove((uint)e.StylusDevice.Id, e.GetPosition(this).ToDrawingPointF());
};

// register the ManipulationDelta event with the manipulation processor
manipulationProcessor.ManipulationDelta += ProcessManipulationDelta;

// set the rotation angle for single finger manipulation
manipulationProcessor.PivotRadius = 2;
}

Write your logic inside the manipulation event handler implementation block. Here I will do rotation, scaling & positioning of the image. Here is my code: 

private void ProcessManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
trTranslate.X += e.TranslationDelta.Width;
trTranslate.Y += e.TranslationDelta.Height;

trRotate.Angle += e.RotationDelta * 180 / Math.PI;

trScale.ScaleX *= e.ScaleDelta;
trScale.ScaleY *= e.ScaleDelta;
}


Conclusion
From the ManipulationDeltaEventArgs you can get various values & depending upon them you can implement your functionality in this block. TranslateTransform will position the image, RotateTransform will do the rotation & the ScaleTransform will resize the image. Run your project to test your first multitouch application. 


Download Sample Application 


Page copy protected against web site content infringement by Copyscape

About the Author

Kunal2383
Full Name: Kunal Chowdhury
Member Level:
Member Status: Member
Member Since: 3/1/2010 12:38:55 PM
Country: India
Thanks & Regards, Kunal Chowdhury | http://www.kunal-chowdhury.com | http://twitter.com/kunal2383
http://www.kunal-chowdhury.com
He is currently working as a Silverlight application developer. Has a very good skill over C#, XAML, Silverlight & WPF. He has a good working experience in Windows 7 application (including Multitouch) development. During his professional career he worked in various technologies & delivered quality output. He never hesitates to take up challenges & work on the latest technologies in Microsoft platform. He attended various software development competition & achieved different awards. He is presently focusing on the RIA (Silverlight & WPF) & willing to become a Technology Specialist in Microsoft platform. Learning newer things, Blog posting & helping others in forums is one of his regular activity. Specialties: Silverlight Application Development, WPF Application Development, Windows 7 Application Development

Login to vote for this post.

Comments or Responses

Posted by: Mrplink on: 8/24/2011 | Points: 25

Is there any simulator for running multitouch application on normal windows7 desktop?

Pls reply

Login to post response

Comment using Facebook(Author doesn't get notification)