Windows Phone 7 Sensors and XNA
Pinch Zoom Touch Panel: XNA Pinch Zoom Demo
Back to main page
Release 1.0 (XNA V4.0)
1. Topics Covered
This program demonstrates XNA programming with the Touch panel. You may wish to
download the source code, open the
project and refer to the source code while follow the discussion.
Topics covered in this tutorial includes:
- TouchPanel gesture initialization
- Working with the TouchPanel as simple location input device like the
mouse: touched, move, release
- Working with the TouchPanel as a multi-touched gesture input device:
DoubleTap, Hold, FreeDrag, Pinch, Flick, Hold.
2. Demo Program Behavior
You will see a screen similar to the following when you compile the attached source code, dispatch to WP7 device/emulator, and run the program.
There are three objects on the screen: the BasketBall, Vase, and Background
image. You can:
- Select: press your finger on any of the object to select it.
- Drag: move your finger and the selected object will follow.
- Double Tap: on a location to move the Vase to the tapped location.
- Hold: press your finger on one location for about one second to move the
Basketball to the hold location.
- Flick: flick your finger over the Basketball in a specific
direction to "kick" the ball around.
- Pinch: touch the screen with two fingers, increase/decrease the distance
between the two fingers to zoom in/out of the background with respect to the
the middle position of the two fingers.
The next section describes the details of the implementation.
3. Solution Structure and External Resources
With the source code open, open the SolutionExplorer (if not already
opened, under View→SolutionExplorer)
in the IDE. Examine the SolutionExplorer and notice:
- Library Reference: Refer to the above figure, the top
red-highlighted area shows the source code
files from the SolutionExplorer. Under References, notice the reference to SimpleLibrary
in addition to the typical references for XNA and system support. This
is a simple library designed for convenience of drawing images as Texture2D.
The library DLL file is located in the SimpleLibraryDLL folder in the
source code. Please refer to the
documentation of this library
for more information on this Library.
- Source code files: Under the same
red-highlighted area, notice that besides the typical
Program.cs source file, PinchZoomDemo.cs is the only file containing source
code. In the next session, we will focus on understanding the implementation
in this file.
- External Resources: The
green-highlighted area shows the content of the Content folder.
- Images: BBall (the Basketball), Vase (the vase), and Bg (the
- Font: Font.spritefont for font output.
- Background audio: SomewhereSunnyVer2.mp3 background music
played by MediaPlayer
- SoundEffects: bounce (when the ball bounces off the window
boundaries), beep (the echo for double tap)
4. Implementation Details
With the simple solutuion structure, we can focus our attention on the source code file:
4a. Main Source Code File Structure (PinchZoomDemo.cs): The following figure shows the structure of the
Notice that none of the instance variables are defined to support the actual touch panel operation.
Touch panel support is well integrated into XNA API, just like the GamePad,
or the Keyboard.
Just like the GamePad and Keyboard, to understand how to work with the
TouchPanel, we can focus on the Initialize() and the Update()
- The using SimpleLibrary statement to include functionality from
- The UnloadContent() function has been removed, since we do not
need to modify it.
- The instance variables:
The actual variables are hidden, and are actually not very important in
this case: we want to concentrate on the mechanics of working with touch
Label A: these are constants for screen dimensions (800x480) and the
help message visible on the top-left of the application.
Label B: These are usual the GraphicsDeviceManger and
SpriteBatch objects for rendering graphics to the screen.
Label C: Theses are the SimpleLibrary objects that supports the
rendition of objects on the application screen.
Label D: These are variables for supporting all audio effects:
background music and sound effect
The Initialize() Function:
The Update() Function:
The above listing shows the initialization and activation of gesture supported
by the TouchPanel, where we registers all interested gestures with the bitwise
OR "|" operator.
The above listing of
the Update() function shows that, as in working with the GamePad, we have
to (the following are expanded views of the Labels in the above Update()
Notice that the selection/dragging and zooming operates with reference to the initial touch position. Please refer to
the discussion in SimpleLibrary documentation on the details of selection and
- Label U1: poll the Touch input mechanism and update the
We see that the TouchCollection state provide us with TouchLocation. Via TouchLocation
we can gain access to states and the location the user has touched. In
this case, we use the touch position to select one of the image objects in
the scene (in the Pressed state). Notice that the selection process
prioritize the vase over the ball over the background.
- Label U2: poll the Gesture input mechanism and update the
In this case, the first two gestures (Pinch and PinchComplete) supports the pinch zoom implementation
(please refer to the SimpleLibrary ZoomableImage for the details of zoom implementation).
FreeDrag gesture simply changes the location of the selected image.
DoubleTap and Hold gesture select and move the vase and ball
images respectively. The Flick gesture passes the flick direction
to the ball and causes the ball to move accordingly.
- Label U3: Update (move) objects in the application.
If the ball object has a velocity, its update method will cause it to respect the velocity and move accordingly. Please refer to the
Simple Library SelectableImage for more details.
- Label U4: this is the typical checking for back button to quit the
5. Self Test And Exercises
- The touch panel interface in XNA supports a synchronous pooling or an
asynchronous event driven model? Answer: Synchronous pool. That is why we do
not need to have any extra variable or synchronization mechanism support.
This will change quickly as we work with other sensor devices on the phone.
- Practice Project: modify the provided source code to
support pinch zooming of the vase.
- Practice Project: modify the provided source code to include an extra image
object that supports both flick-bouncing and pinch-zoom.
- Practice Project: modify the provided source code to limit the pinch zoom of the background image
such that the image can never be larger than the the application window.
Computing and Software Systems
University of Washington, Bothell
Project home page:
The Game-Themed Introductory Programming Project.
||This work is supported in part by Microsoft Research under the Computer Gaming Curriculum in Computer
Science RFP, Award Number 15871 and 16531, and Microsoft Higher