Printing in Silverlight

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 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://www.prakashinfotech.com/wp-content/uploads/2012/11/?LinkID=149156&v=3.0.40624" style="text-decoration: none">
<img src="http://www.prakashinfotech.com/wp-content/uploads/2012/11/?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. This 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 following 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 its 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);

Leave a reply