Display Silverlight UIElements in Powerpoint

Since Silverlight is a rich application, there are lot of security limitations that Microsoft takes action. One of them is Clipboard limitations, which does not allow you to copy images to Clipboard within Silverlight application.

In this blog, I will mention about the workaround on this issue.
The basic steps we will follow are listed in below list:

• Take/Get snapshot - WriteableBitmap
• Convert the snapshot to PNG - ImageTools
• Set Html img source - Html Bridge
• Copy Html img to Clipboard - javascript

After those steps, you have to use Right Click on your ppt slide, Ctrl+V  still not working properly.

Take/Get snapshot

WriteableBitmap bmp = new WriteableBitmap(yourUIElement,null);

Convert to PNG

This convertion uses ImageTools.PngEncoder and gets png stream to memory. Then since you cannot set image source as Url because as a client there is no easy way to serve your png image, this png stream should be converted to Base 64 string.

var image = bmp.ToImage();

var encoder = new PngEncoder();

MemoryStream stream = new MemoryStream();

encoder.Encode(image, stream);

var myStartImageByteStream = stream.GetBuffer();

string encodedData = "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(myStartImageByteStream);

Set Html img source

As an initial design, we put an invisible html img in our page as below:

<img id="tmpImg" style="visibility:hidden" width="0" height="0"/>

Using Html bridge in Silverlight, we will set its source with our Base 64 string.

var html = HtmlPage.Document;
var img = html.GetElementById("tmpImg");
img.SetAttribute("src",encodedData);

Copy Html img to Clipboard 

Since Silverlight only allows setting uni-code text in Clipboard, you have to insert your html img into Clipboard with javascript help.

function copyToClipboard() {

    var img = document.getElementById('tmpImg');

    img.contentEditable = 'true';

    var controlRange;

    if (document.body.createControlRange) {

        controlRange = document.body.createControlRange();

        controlRange.addElement(img);

        controlRange.execCommand('Copy');

    }

    img.contentEditable = 'false';

}

Then call this method from Silverlight;

HtmlPage.Window.Invoke("copyToClipboard");

That's all to do.

How to use

• Powerpoint; in your powerpoint slide, Right Click and choose paste option that shows image icon.
• Word; in your page, Ctrl+V and also Right Click will not paste the image. In order to paste this image, you have to click "Object" button in "Insert" tab. In the opening page, choose "Bitmap Image" and click "Ok". This will open you the MsPaint and paste the image here and close it. This action will paste your image in to the Word document.

It is very very easy, isnt it :))