Click here to Skip to main content
11,505,486 members (65,631 online)
Click here to Skip to main content

Windows 7 Multitouch Application Development (Part – II)

, 8 Sep 2009 CPOL 15.7K 10
Rate this:
Please Sign up or sign in to vote.
In my last post Windows 7 Multitouch Application Development (Part - I), I described about how to handle multitouch image manipulation in Windows 7 which gives a very basic idea on the multitouch development. In this post, I will show you how to manage multitouch events for multiple images separatel

In my last post Windows 7 Multitouch Application Development (Part - I), I described how to handle multitouch image manipulation in Windows 7 which gives a very basic idea on the multitouch development. That code used multitouch manipulation for the entire screen. If there are multiple images in the screen, this will raise events for all of them.


In this post, I will show you how to manage multitouch events for all the images separately. See one such image manipulation demo here.

For this, we have to assign a unique touch-id for each finger on the screen. As long as the finger touches the screen, the associated touch-id will remain same for that particular finger. If the user releases his finger, the system will release the touch-id and that can be again assigned by the system automatically on next touch. So, how can we get the touch-id? You can get it from the StylusEventArgs (i.e., args.StylusDevice.Id). The stylus device will automatically generate this ID for each touch; only thing is you have to assign it with the respective finger touch.

First of all, we will create a User Control which will consist of a single image and the XAML code for its RenderTransform. This is the same thing we did in the previous post which was inside the Window, but here, it will be inside the User Control (Picture class). Create a DependencyProperty to assign the ImageLocation dynamically.

<UserControl x:Class="Windows7MultitouchDemo.Picture"
    <Image Source="{Binding Path=ImageLocation}" Stretch="Fill" Width="Auto"
           Height="Auto"  RenderTransformOrigin="0.5, 0.5">
                <RotateTransform x:Name="trRotate"/>
                <ScaleTransform x:Name="trScale"/>
                <TranslateTransform x:Name="trTranslate"/>

To track the multi-touch simultaneously for the above “Picture” user control, you can use the PictureTracker class which comes with the Windows 7 Training Kit. You can download it from the Microsoft website. It looks similar to this:

/// <span class="code-SummaryComment"><summary>
</span>/// Track a single picture
/// <span class="code-SummaryComment"></summary>
</span>public class PictureTracker
   private Point _prevLocation;
   public Picture Picture { get; set; }
   public void ProcessDown(Point location)
       _prevLocation = location;
   public void ProcessMove(Point location)
       Picture.X += location.X - _prevLocation.X;
       Picture.Y += location.Y - _prevLocation.Y;
       _prevLocation = location;
   public void ProcessUp(Point location)
       //Do Nothing, We might have another touch-id that is
       //still down

Now, we have to store all the active touch-ids associated with the PictureTracker class. So, we will use a Dictionary for that. We will use the same PictureTrackerManager class which again comes with the Windows 7 Training Kit.

private readonly Dictionary<int, PictureTracker> _pictureTrackerMap;

Create an instance of the PictureTrackerManager class inside your Window1.xaml.cs and register the stylus events with the PictureTrackerManager events. So now, whenever a touch occurs on the Picture, the PictureTrackerManager will first find the associated touch-id for the respective instance and raise an event to process the same.

//Register for stylus (touch) events
StylusDown += _pictureTrackerManager.ProcessDown;
StylusUp += _pictureTrackerManager.ProcessUp;
StylusMove += _pictureTrackerManager.ProcessMove;



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury (@kunal2383)
Team Leader
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog:
Twitter :
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

Generalhelp Pin
nivaas18-Nov-10 23:20
membernivaas18-Nov-10 23:20 
GeneralRe: help Pin
Kunal_Chowdhury29-Nov-10 5:02
mentorKunal_Chowdhury29-Nov-10 5:02 
AnswerRe: help Pin
Kunal_Chowdhury29-Nov-10 5:27
mentorKunal_Chowdhury29-Nov-10 5:27 
Hi Nivaas,

For you, I uploaded the sample project. You can download it from here: Sample Project[^]
Explore the project. Hope, you will understand the code if you browse the solution project.
Let me know, if you need further help.

Please Vote for the Articles and/or Posts that you like.
Kunal Chowdhury (Microsoft MVP [Silverlight] | Follow My Blog | Follow Me @ Twitter)

GeneralMy vote of 3 Pin
Thomas Stockwell12-Sep-10 8:17
memberThomas Stockwell12-Sep-10 8:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 9 Sep 2009
Article Copyright 2009 by Kunal Chowdhury (@kunal2383)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid