How to create Image Stream of XAML Page using Telerik’s ExportExtension method?

Earlier days while working with Silverlight 2, it was very difficult to take a snapshot of the XAML page programmatically in Silverlight. Later WritableBitmap class helped us to take snapshot of any portion and save it as image.

Today I learnt something new to do this operation very easily using Telerik library methods and hence thought to share with you in this post.

Introduction

WritableBitmap and WritableBitmapEx classes are very powerful in terms of doing any image editing operation. I remember those days while working in Silverlight 2 project when we did not have this power to take snapshot of the page or page element programmatically in Silverlight. We had to create the XAML string programmatically and pass it on to the server using the WCF services and there using a Windows Service or WPF application we had to create the UI in the background and take snapshot of that.

In those days I felt proud when I got an award from my organization for innovating that idea and built a project for one of our client, though that was not a full proofed solution.

Later when the Microsoft introduced WritableBitmap class, it was just a few simple steps to create an image and/or modify an existing image in Silverlight. Developers got best benefit out of it and we were able to take screenshot directly from the Silverlight application.

Telerik Extension

Telerik simply did another amazing thing by just exposing an API to create an Image stream of a control directly from the code, which internally does the same thing that WritableBitmap does in this case. So, if you are already using Telerik library, you can easily use that API method to generate the image stream instead of writing code using the WritableBitmap class to do the same operation.

If you know about the class WritableBitmap, you already know how to do this. In this post, I will just share you how to use the Telerik API to use that exporting to image feature.

ExportToImage(…) method is part of the Telerik library under Telerik.Windows.Media.Imaging namespace and present in the ExportExtensions class. It takes three parameters to convert an UI element to an image stream. The first parameter that it accepts is the UI control which you want to save as image, the second parameter that it takes is the stream where you want to store the captured image and the third parameter it takes is the Encoder format.

There are three types of image format that it accepts and they are as below:

1. PNG – Portable Network Graphic
2. BMP – Bitmap image file
3. XPS – XML Paper Specification

Using any of the above three image format types as encoder, you can easily create the screenshot of your Silverlight application.

In case you are a C# user, here is the code for you with explanation in comments:

// First have a Stream (MemoryStream or FileStream)

var stream = new MemoryStream();

// Call proper method from the Telerik library to create the image stream from the control

ExportExtensions.ExportToImage(FRAMEWORK_ELEMENT, stream, new PngBitmapEncoder());

// Create a new Bitmap Image and set the Stream as it's source

BitmapImage bitmapImage = new BitmapImage();

bitmapImage.SetSource(stream);

// Set the Bitmap Image as the source of your Image control

myImageControl.Source = bitmapImage;

// In case you want to have the byte array of the Stream

stream.ToArray();

In case you are a VB.Net user, here is the code for you with explanation in the comments:

' First have a Stream (MemoryStream or FileStream)

Dim stream = New MemoryStream()

' Call proper method from the Telerik library to create the image stream from the control

ExportExtensions.ExportToImage(FRAMEWORK_ELEMENT, stream, New PngBitmapEncoder())

' Create a new Bitmap Image and set the Stream as it's source

Dim bitmapImage As New BitmapImage()

bitmapImage.SetSource(stream)

' Set the Bitmap Image as the source of your Image control

myImageControl.Source = bitmapImage

' In case you want to have the byte array of the Stream

stream.ToArray()

Keep in mind:

You must need a Stream instance while calling the Telerik.Windows.Media.Imaging.ExportExtensions.ExportToImage(…) method, else you will encounter a NullReferenceException in your application. In case you missed it, just initialize the stream before calling the method.

Once you have the stream, you can save the stream to database or set it as source to an image control placed inside your application. In case you need to have a byte array out of that, call the ToArray() method on the stream instance which will return you the complete bytes.

What’s Next?

Not only this simple step, you can use a SaveFileDialog to save the image stream directly to user’s hard drive. To do this, you need to set up the SaveFileDialog window first and then using the dialog instance, you can get the stream of the file where the user wants to save the image. Finally call the ExportToImage(…) method from the Telerik library to save the page or portion of the page as image screenshot.

Here is the C# implementation of the sample code:

// Create the instance of the SaveFileDialog class with all the options set

SaveFileDialog saveFileDialog = new SaveFileDialog()

{

    DefaultExt = "png",

    Filter = "PNG (*.png)|*.png"

};

// Call the SaveFileDialog to show in the screen

if (saveFileDialog.ShowDialog())

{

    // Ask the user to select the path where s/he wants to save the image

    using (Stream stream = saveFileDialog.OpenFile())

    {

        // Finally call the ExportToImage with proper Stream of File

        ExportExtensions.ExportToImage(FRAMEWORK_ELEMENT, stream, new PngBitmapEncoder());

    }

}

Here is the VB.Net implementation of the sample code:

' Create the instance of the SaveFileDialog class with all the options set

Dim saveFileDialog As New SaveFileDialog() With { _

    .DefaultExt = "png", _

    .Filter = "PNG (*.png)|*.png" _

}

' Call the SaveFileDialog to show in the screen

If saveFileDialog.ShowDialog() Then

    ' Ask the user to select the path where s/he wants to save the image

    Using stream As Stream = saveFileDialog.OpenFile()

        ' Finally call the ExportToImage with proper Stream of File

        ExportExtensions.ExportToImage(FRAMEWORK_ELEMENT, stream, New PngBitmapEncoder())

    End Using

End If

Want to know further on this API? Don’t forget to read the original documentation available on Telerik Help for Silverlight.

Connect with me on Twitter, Facebook and Google+. Also subscribe to my blog’s RSS feed and Email Newsletter to get article updates directly delivered to your inbox. In case any queries on the above code snippet, you are always welcome to leave your queries/comments below and I will try to get back to you as soon as I can. Thank you. Have a great day ahead.