1. Topics Covered
This program demonstrates XNA support for invoking and obtaining images from the
Camera on the phone, and from the "Photo Chooser Task". 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
- Invoking the Camera Task
- Invoking the Photo Chooser Task
- Turning an image file on the phone (e.g., a photograph) into a Texture2D
Pre-requisite: this tutorial assumes you have read through the
Pinch Zoom Touch Panel Tutorial, in particular,
2. Demo Program Behavior
- Tap the screen once to bring up the Photo Chooser program, choose any photograph
or image to use as the new background for the application.
- Drag horizontally to bring up the camera, snap any pictures to use as the background
image for the application
Note: at the time of writing (Sep 15th 2010), this program has only been tested on
the WP7 emulator.
You will see screens similar to the following when you compile the attached source
code, dispatch to WP7 device/emulator, and run the program.
Tap the screen to bring up the Photo Choose program as follow:
Select any image/photograph, and the control will return to the tutorial with the
selected image as the new background. As follows:
3. Solution Structure and External Environment
As discussed, the solution structure of this tutorial is similar to the
solution structure of the Pinch Zoom Touch Panel tutorial, where SimpleLibrary
is referenced for the image and font output. The following are the main
- Source code files: The implementation are contain in two files:
In our discussion, we will first look at CameraDemo.cs first followed by examining
the implementation of the event routines.
- CameraDemo.cs: implements the main XNA framework functions that supports
- CameraDemo_Compute.cs: implements Task service routines for the camera and
the photo chooser.
- External Resources: there are the usual background music and sound effect
files. In this application the two main images are the background image (City.png)
and the little blue airplane (Plane.png) that continuously travels from left
4. Implementation Details:
4a. CameraDemo.cs: (User Interaction Support)
The Initialize() function:
The above listing shows a structure similar to that from the
structure of the Pinch Zoom Touch panel tutorial. The main difference is
in the instance variables support (at Label E) for the Camera and Photo Chooser
- PhotoChooserTask and CameraCaptureTask: conceptually, thses are references
to threads that we can invoke at run time.
- mLoadCount: is a simple count of how many times we have invoked the camera
or photo chooser tasks.
- mTaskStarted: this boolean indicates a task has already been started and
ensures we do not attempt to start the same task more than once based on the same
The Update() Function:
The above listing shows the initialization of the Tasks are performed in the Initialize()
- Label I1: initialize gesture input for user interaction.
- Label I2 and I3: instantiate the tasks. In each case, since the tasks will be running
asynchronously, we register event service routines to receive the results from these
tasks: PhotoChosen(), and CamerDoneEvent() (these functions are implemented
in the CameraDemo_Compute.cs file and will be described later
in this tutorial: here.
The above listing shows that, with the tasks properly initialized, during update,
we must check for users action (Label U1), move the little airplane (Label U2),
and detect the quit condition (Label U3). The following listings focus on the code
under each of labels U1 and U2.
- Label U1: decoding the user gesture.
mEffect.Play() plays a SoundEffect cue. Task.Play() is like an actual function
call where the target task (phone or photo chooser) begins execution and takes over
the application screen. In the mean time, our application looses control over the
phone screen and thus will wait for the target task to complete and return the control
of the phone screen . By setting mTaskStarted to true, we filter out
input device noises that may result in a single user action invoking the same task
multiple times. Notice in the above code, we never reset the value of mTaskStarted
back to false. This variable will be reset by the routines that
service the "task completed" event.
- Label U1: decoding the user gesture.
Simple code to move the airplane right-ward.
4b. CameraDemo_Compute.cs: Event service support
This file implements the event service routine when the invoked tasks have completed.
The following explains each function in this file according to their order in the
Simple construct a message (for Draw() to display) displaying the status of the
photo retrieval. If successful, use the image name (file name) to create a Texture2D
object to be used as the background image.
This is the actual routine that services the "Camera Task Completed"
event. Once again, this routine is invoked asynchronously from a different thread
so all it does is create a thread-safe way of calling RetrivePhoto().
Same as above, this is the event service routine for the "Photo Chooser Task
Completed" event .
5. Self Test and Exercises
- What will happen if we called: mChoosePhotoTask.Show() and mCameraTask.Show()
next to each other based on the same user action (e.g., HorizontalDrag)? Answer:
this is an error, notice that after the "Task.Show()" call, our
Update() function continues to execute! Trying to initiate two tasks that attempt
to take control of the phone screen at the same time is an error. Your application
- Practice Project: instead of modifying the background with selected image, create
new SimpleImage objects with dimension 30x30 using the results returned from RetrivePhoto().
- Practice Project: investigate the Microsoft.Phone.Task namepsace (refer to
the References section) and write an XNA phone app that sends yourself an email
everytime you tap the screen twice.
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