Often times, you want to take a screenshot of an application’s page. There can be multiple reasons. For instance, you can use this to provide an easy feedback method to beta testers. I find this super invaluable when working on integration of design in an app, and the user can take quick screenshots, attach them to an email and send them to me directly from the Windows Phone device. However, the same mechanism can also be used to provide screenshots are a feature of the app, for example if the user wants to save the current status of his application, etc.

Caveats

Note the following:

• The code requires an XNA library to save the picture to the media library. To have this, follow the steps:
  • In your application (or class library), add a reference to Microsoft.Xna.Framework.
  • In your code, add a “using” statement to Microsoft.Xna.Framework.Media.
  • In the Properties folder, open WMAppManifest.xml and add the following capability: ID_CAP_MEDIALIB.
• The method call will fail with an exception if the device is connected to the Zune application on the PC. To avoid this, either disconnect the device when testing, or end the Zune application on the PC.
• While the method call will not fail on the emulator, there is no way to access the media library, so it is pretty much useless on this platform.
• This method only prints Silverlight elements to the output image. Other elements (such as a WebBrowser control’s content for instance) will output a black rectangle.

The code

public static void SaveToMediaLibrary(
    FrameworkElement element, 
    string title)
{
    try
    {
        var bmp = new WriteableBitmap(element, null);

        var ms = new MemoryStream();
        bmp.SaveJpeg(
            ms,
            (int)element.ActualWidth,
            (int)element.ActualHeight,
            0,
            100);
        ms.Seek(0, SeekOrigin.Begin);

        var lib = new MediaLibrary();
        var filePath = string.Format(title + ".jpg");
        lib.SavePicture(filePath, ms);

        MessageBox.Show(
            "Saved in your media library!",
            "Done",
            MessageBoxButton.OK);
    }
    catch
    {
        MessageBox.Show(
            "There was an error. Please disconnect your phone from the computer before saving.",
            "Cannot save",
            MessageBoxButton.OK);
    }
}

• This method can save any FrameworkElement. Typically I use it to save a whole page, but you can pass any other element to it.

• On line 7, we create a new WriteableBitmap. This excellent class can render a visual tree into a bitmap. Note that for even more features, you can use the great WriteableBitmapEx class library (which is open source).

• On lines 9 to 16, we save the WriteableBitmap to a MemoryStream. The only format supported by default is JPEG, however it is possible to convert to other formats with the ImageTools library (also open source).

• Lines 18 to 20 save the picture to the Windows Phone device’s media library.

Using the image

To retrieve the image, simply launch the Pictures library on the phone. The image will be in Saved Pictures. From here, you can share the image (by email, for instance), or synchronize it with the PC using the Zune software.

Saving to other platforms

It is of course possible to save to other platforms than the media library. For example, you can send the image to a web service, or save it to the isolated storage on the device. To do this, instead of using a MemoryStream, you can use any other stream (such as a web request stream, or a file stream) and save to that instead.

Hopefully this code will be helpful to you!

Happy coding,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn