First of all, I would like to say thank you to Davide Zordan, Stefan Wick, Jonas Follesø and Laurent Bugnion for helping me to get this post out. It took me quite a few days since I was facing a lot of problems. Now, it’s working in my machine and I like to share this with you all.
This post is written for those who don’t have touch device but want to develop multi-touch Silverlight application for Windows Phone 7. If you prefer to watch the screen-cast created by the original developer of Multi-touch Vista, you can watch it here. But as there is no audio and the way that he presented is a bit fast for the most of viewers, I decided to write the step-by-step tutorial based on his screen-cast. I give the full credit to the original developer of Multi-touch Vista. He has done very good job.
You will need the software below before you start playing with Silverlight for Phone 7.
- Windows 7
- Visual Studio 2010 and .NET Framework 4 Release Candidate
- Windows Phone Developer Tools CTP
2. Download Multi-Touch Vista
Once you have installed the required software above, you need to download Multi-touch Vista from codeplex. We will be using Multi-touch Vista as a multi-touch simulator in this article. There are a lot of things that Multi-touch Vista can do but we will use it as a touch simulator only. The following is what the author of Multi-touch Vista wrote about his project. I’m just doing copy-paste the description here just in case you are interested to read. :)
Multi-Touch Vista is a user input management layer that handles input from various devices (touchlib, multiple mice, TUIO etc.) and normalises it against the scale and rotation of the target window. Now with multitouch driver for Windows 7.
2. Installing the driver
- Extract the zip file
- Open the Command line with administrator right (Note: This is very important step. Otherwise, you will get this error “devcon failed.” )
- Go to the folder that you have extracted the file
- Go to Driver folder
- Go to x64 or 32 based on your system configuration (In my case, I’m using 64 bits computer so I will go to x64 folder. )
- Then, you will see one bat file called Install driver.cmd
- Type “Install driver.cmd” and press Enter key as shown in picture.
- You will get the dialog below asking whether you want to install this device software or not. Please click on “Install” button
- If the installation is completed, you will see the message as below in command line. Then, you can close that cmd now.
3. Device Manager
- Now, it’s time to open the device manager. You can open the device manager from control panel but I will do with short-cut way.
- Type “device manager” without double quote in Window Search Bar and hit Enter Key
- Now you will see the Device Manager as below. Go to “Human Interface Devices”
- Right-click on “Universal Software HID device”
- And choose “Disable” to disable the device
- You will get the confirmation before disabling the device.
- Just say “Yes”
- After that, re-enable this device again.
- Right-click again on this node and choose “Enable”
4. Pen and Touch
- Please type “pen and touch” without double quotes in Windows Search Bar. (Note: If you have managed to complete the step #3 property, you should be able to open “pen and touch” dialog. If you don’t get any dialog then please go thru the step #3 again. )
- You will get the “Pen and Touch” dialog as below. Go to “Touch” tab and tick on “Show the touch pointer when I’m interacting with itmes on the screen.”
5. Creating Silverlight Phone Application
- You can refer this MSDN article “How to: Handle Manipulation Events” to create “Windows Phone Application” in Visual Studio 2010.
- OR you can download my sample that I created from this link.
Once you have downloaded the sample, please open it in VS 2010 and build it. Please ensure that you are able to compile it successfully. After that, we need to run the Multi-touch Vista to simulate the touch input for our application.
6. Running Multi-touch Simulator
- Connect another mouse device in USB port.
- Run Multitouch.Service.Console.exe
- One console window will be opened as below. And you will see two touch pointers
- Run Multitouch.Driver.Console.exe (You will get another console window. )
- Run Multitouch.Configuration.WPF.exe
- Click on “Configure” to block the cursor
The system cursor is no longer available after that. But as you already have two mouse devices, you can move those “red” touch pointers by using your mouse. Each “red” touch pointer represents each USB mouse that you connected to your computer.
Let’s open Microsoft Paint and draw two lines simultaneously by using two mice. Here is what I have done. (My wife gave me weird look when I’m using two mice in one computer. :) ) Please try yourself and have fun.
- Okay. Let’s go back to Visual Studio that we opened it earlier
- Run it (it will take a while to load the emulator. You will see the screen below once it’s loaded. )
- Move one “red” touch pointers on blue rectangle
- Press it and move it around. You should be able to move that rectangle with your mouse.
- Move two “red” touch pointers on blue rectangle
- Press both left buttons of both mice. Drag one up and another one down slowly. (You will see that the rectangle will be a bit longer as below. )
Note that the scaling is not really smooth right now. I will have to work on that. But I’m glad that I’m able to test it with multi-touch simulator without buying real touch device. Anyway, if you can afford to get a real touch device, I would recommend you to get it.
Happy Silverlighting!! :)