Charles Petzold

When I was at Tech Ed in Atlanta recently, someone asked me how to do screen shots of Windows Phone programs. You might need screen shots if you're writing a book, article, or blog entry about Windows Phone programming. Screen shots are also required when you submit a program to the Windows Phone Marketplace.

For screen shots of arbitrary programs running on the phone, I have no idea how to do it. (I wish we had a video feed from the phone, but it doesn't look like that's coming any time soon.) But for images of your own programs, it's not too bad.

By far the easiest approach is simply to capture the image of the Windows Phone emulator running on your desktop. I was recently introduced to a great tool for doing this: the Windows 7 Snipping Tool. It should be in the Accessories folder of your Start menu. After selecting Window Snip from the menu, you can choose to capture an image of the entire emulator, or just the program running inside it.

There are times, however, when you really need a screen shot from the actual phone. This is the case if your program does something with the media library, probably accessing pictures or music. There doesn't seem to be a way to get this stuff on the emulator.

For cases where you need to shoot your Silverlight program actually running on the phone, try inserting the following code (or something similar) in the constructor of the App class:

var timer = new System.Windows.Threading.DispatcherTimer 
{
    Interval = System.TimeSpan.FromSeconds(10)
};
timer.Tick += (sender, args) =>
{
    Microsoft.Devices.VibrateController.Default.Start(
                    TimeSpan.FromSeconds(0.1));
    var bitmap = new System.Windows.Media.Imaging.WriteableBitmap(
                    this.RootFrame, null);
    var stream = new System.IO.MemoryStream();
    System.Windows.Media.Imaging.Extensions.SaveJpeg(bitmap, stream, 
                    bitmap.PixelWidth, bitmap.PixelHeight, 0, 100);                
    stream.Position = 0;
    var mediaLib = new Microsoft.Xna.Framework.Media.MediaLibrary();
    var datetime = System.DateTime.Now;
    var filename = 
        System.String.Format("Capture-{0}-{1}-{2}-{3}-{4}-{5}",
                datetime.Year % 100, datetime.Month, datetime.Day, 
                datetime.Hour, datetime.Minute, datetime.Second);
    mediaLib.SavePicture(filename, stream);
};
timer.Start();

Every 10 seconds, this code captures an image of your program — and vibrates the phone a bit to let you know it's doing so — and then saves the image to the phone's picture library with a filename indicating the date and time.

I've written the code with fully-qualified class names so you don't need any extra using directives. However, the application will need a reference to the Microsoft.Xna.Framework library because that's where the MediaLibrary class resides. Visual Studio will complain a bit, but it's OK.

Because this code accesses the phone's media library to save the image, it won't work if the phone is connected to the PC via the Zune desktop software. Zune wants exclusive access to the phone's media library. You'll have to either disconnect the phone from the PC, or terminate Zune. If you want to continue running the program under Visual Studio, you'll need to run the WPConnect tool that should be located in your C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect directory. If it's not there, you'll need to install the January 2011 Windows Phone tools update. This WPConnect tool lets Visual Studio communicate with the phone without Zune.

The screen shots will be stored in the phone's Pictures library in a folder called Saved Pictures. From the phone, you can email the pictures to yourself, or you can copy them to the PC. For that latter job, you'll need to run Zune again. Just like any other picture, you can copy the screen shots to the PC by dragging them to the computer image at the bottom of the Zune screen. The files will be copied to a directory of your PC's Pictures library.

Although the technique I'm using here appears to capture your application's entire visual tree to the WriteableBitmap, some parts will be missing. The system tray is not part of the visual tree, so that won't be on the screen shot. Also missing is the ApplicationBar. Although the ApplicationBar seems to be a child of the PhoneAppicationPage, it is not, I'm afraid to say, part of the page's visual tree. If your program has an ApplicationBar, you'll have to paste that image in from the emulator.