Last at work I had the following request for the application:
“We want a printing mechanism, but the default Internet Explorer printing is not enough. We only want that specific part of the website”.
For the record, the application here is a Silverlight application. The application contains navigation windows that may not be added to the printed version of the control.
And then I started looking at the Printing API. Here you have the possibility to isolate a particular FrameworkElement that you want to print. Hereby it is possible to exclude all the navigation controls from the printed page.
I created a test application that looks like this:
In this example you can see a MainWindow with some buttons and a canvas. In that canvas are some labels and a usercontrol.
The xaml for this Window looks like this:
<grid background="White" x:name="LayoutRoot"> <button name="btnPrintEverything" click="btnPrintEverything_Click" width="92" verticalalignment="Top" margin="12,12,0,0" horizontalalignment="Left" height="23" content="Everything"> <button name="btnPrintContent" click="btnPrintContent_Click" width="82" verticalalignment="Top" margin="110,12,0,0" horizontalalignment="Left" height="23" content="content"> <button name="btnPrintUserControl" click="btnPrintUserControl_Click" width="93" verticalalignment="Top" margin="198,12,0,0" horizontalalignment="Left" height="23" content="UserControl"> <canvas margin="0,41,0,0" name="cvContent"> <my:silverlightusercontrol x:name="silverlightUserControl" width="162" height="141" canvas.top="36" canvas.left="135" /> <sdk:label width="108" height="30" content="Example1" name="label1" canvas.top="6" canvas.left="12" /> <sdk:label width="108" height="30" content="Example2" name="label2" canvas.top="36" canvas.left="12" /> <sdk:label width="108" height="30" content="Example3" name="label3" canvas.top="72" canvas.left="12" /> <sdk:label width="108" height="30" content="Example4" name="label4" canvas.top="108" canvas.left="12" /> <sdk:label width="108" height="30" content="Example5" name="label5" canvas.top="147" canvas.left="12" /> </canvas> </grid>
Now i tried to print 3 versions of this application.
The first version was to print everything on the screen. Here I used the Grid FrameworkElement ‘LayoutRoot’.
The second version was to print the content of the screen (everything expect from the top buttons). Here I used the canvas ‘cvContent’.
And the last version was to print only the userControl (the green part). Here I used the ‘silverlightUserControl’ name.
The code to accomplish this looks like this:
private void btnPrintEverything_Click(object sender, RoutedEventArgs e) { Print("Everything", this.LayoutRoot); } private void btnPrintContent_Click(object sender, RoutedEventArgs e) { Print("Conten", this.cvContent); } private void btnPrintUserControl_Click(object sender, RoutedEventArgs e) { Print("UserControl", this.silverlightUserControl); } private void Print(string documentTitle, FrameworkElement element) { var docToPrint = new PrintDocument(); docToPrint.PrintPage += (s, args) => { args.PageVisual = element; }; docToPrint.Print(documentTitle); }
The result looks like this (3 versions):