Problem: Printing in silverlight.

Answer: One of the important missing features in Silverlight has been printing support. If you have ever tried to print a web page containing Silverlight content, what you saw on the printed page may be skewed or even missing altogether!  

In one of the projects we are working, we need to print information from silverlight application for a user. We have resolved this problem using HTML Bridge.

First of all, Place one div element in your .aspx or .html page which holds your silverlight object as shown below. Look at printDiv tag. It will hold printing content of silverlight application.

“<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"

            width="100%" height="100%">

            <param name="source" value="ClientBin/XXXXX.xap" />

            <param name="onError" value="onSilverlightError" />

            <param name="background" value="white" />

            <param name="minRuntimeVersion" value="3.0.40624.0" />

            <param name="autoUpgrade" value="true" />

            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">

                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"

                    style="border-style: none" />

            </a>

        </object>

        <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;

            border: 0px"></iframe>

    </div>

    <div id="printDiv" style="display: none; height: 0; width: 0; z-index: -1; position: absolute">

    </div>

Add this JavaScript function as below in same aspx or html page. These will pop up a print dialog to print dynamically generated content in printDiv element.

//        Function to print itinarary layout

        function CallPrint() {

            var prtContent = document.getElementById("printDiv");

            var WinPrint = window.open('', '', 'left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0');

            WinPrint.document.write(prtContent.innerHTML);

            WinPrint.document.close();

            WinPrint.focus();

            WinPrint.print();

            WinPrint.close();

            prtContent.innerHTML = "";

        }

 

Now question is how we can add elements and set values from silverlight in this div tag. Here Is the solution. For HtmlElement and HtmlPage object please add statement

 using System.Windows.Browser;

//get printDiv element of html or aspx page as HTMLElement

HtmlElement printDiv = HtmlPage.Document.GetElementById("printDiv");

 

//setting printDiv's innerHTML property to empty string

printDiv.SetProperty("innerHTML", string.Empty);

 

//creating table and tbody instance

HtmlElement table = HtmlPage.Document.CreateElement("table");

HtmlElement tbody = HtmlPage.Document.CreateElement("tbody");

 

//setting table width and Vertical align properties

table.SetStyleAttribute("width", "70%");

table.SetStyleAttribute("verticalAlign", "top");

 

 

//creating TripName(Header of page) label in top

HtmlElement trTrip = HtmlPage.Document.CreateElement("tr");

 

HtmlElement tdTrip = HtmlPage.Document.CreateElement("td");

tdTrip.SetStyleAttribute("width", "20%");

tdTrip.SetStyleAttribute("verticalAlign", "top");

 

// add input element and set it’s properties and value

HtmlElement tripinput = HtmlPage.Document.CreateElement("input");

tripinput.SetAttribute("value", _dashboard.lblControlName.Text);

tripinput.SetStyleAttribute("width", "100%");

tripinput.SetAttribute("type", "text");

tripinput.SetAttribute("readonly", "readonly");

tripinput.SetStyleAttribute("border", "0");

tdTrip.AppendChild(tripinput);

trTrip.AppendChild(tdTrip);

tbody.AppendChild(trTrip);

 

//adding tbody tablebody to table

table.AppendChild(tbody);

//adding table to printDiv Div

printDiv.AppendChild(table);

 

//call to javascript Function which will fire print command to print Printdiv contents

HtmlPage.Window.CreateInstance("CallPrint", null);

 

That’s it.

 

Thanks,

Posted By: Darshana Rana & Jigar patel