Take a screenshot of a FrameworkElement on Windows Phone 7

Windows Phone logoIn my application Earthquakes, if you try it (and I’m sure you already did 🙂 ) you probably noticed that you can take a screenshot of the application and send it by email, by text… Anyway, it is not very tricky to take a screenshot on the current page in Windows Phone 7. Here is the code.

String tempJpeg = "TempJPEG.jpg";

try {
    // Capture the screen (this) and apply no transformation<>  WriteableBitmap bmp = new WriteableBitmap(this, null);

    // Get a virtual store file to temporarily store the image var store = IsolatedStorageFile.GetUserStoreForApplication();
    if (store.FileExists(tempJpeg))
        store.DeleteFile(tempJpeg);

    // Create the file in the store     IsolatedStorageFileStream myFileStream = myStore.CreateFile(tempJpeg);

    // Save the WriteableBitmap into JPEG stream and place into isolated storage file. bmp.SaveJpeg(myFileStream, bmp.PixelWidth, bmp.PixelHeight, 0, 100);
    myFileStream.Close();

    // Create a new file stream. myFileStream = myStore.OpenFile(tempJpeg, FileMode.Open, FileAccess.Read);

    // Put the JPEG file to the photos library on the device. using (MediaLibrary library = new MediaLibrary())
    {
        library.SavePicture("image.jpg", myFileStream);
    }
    myFileStream.Close();
}
catch (Exception) { }

If you want to save only a FrameworkElement instead of the whole page, you can just change this in the first line and use the object you want.

However, a user of the application (thanks to him) noticed a big issue with in my application. If you use the light theme and try to take a screenshot to share, the screenshot appears to be black with only the Bing map. All the text disappears. The problem is that the background of the PhoneApplicationPage is not used in the render of the bitmap, Black is used instead. So in order to fix this problem, you have to define the background on your main container, in the example below I define the Background on the Grid and use the resource PhoneBackgroundBrush.

<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            x:Class="Demo.Screenshot"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignHeight="696"
                            d:DesignWidth="480"
                            shell:SystemTray.IsVisible="True">

    <!-- You must define here the background with the resource PhoneBackgroundBrush instead of Transparent -->
    <Grid Background="{StaticResource PhoneBackgroundBrush}">

    </Grid>

</phone:PhoneApplicationPage>

And after that, it works very well!

Wp7EarthquakeLight Wp7EarthquakeDark

Now, please try Earthquakes for Windows Phone 7, it’s free!