Printing Documents in Silverlight

DotImage 9.0 introduces support for printing in Silverlight when used with Silverlight 4. This article will cover the steps for building a simple Silverlight 4.0 application with Visual Studio 2010 that will print all of the images loaded in our SilverlightImageViewer.

Creating the Silverlight Project

Open Visual Studio and select New -> Project from the File menu. Select the Silverlight Application for C# project type and give it any name you like. Make sure the “Create directory for solution” option is checked and click OK.

When the New Silverlight Application dialog appears, let Visual Studio generate the web project for us and make sure to select the Silverlight 4 version. Click OK to finish the project creation.

Setting Up the Web Application

First we need to add Atalasoft references to the web project (not the C# project). Right-click on the References folder and add the following assemblies:

• Atalasoft.dotImage
• Atalasoft.dotImage.Lib
• Atalasoft.dotImage.Silverlight.Web
• Atalasoft.Shared

Now let’s add the SilverlightWebHandler into our web page. Open the ASPX page auto generated by Visual Studio and at the top of the page add the following Register tag:

<%@ Register Assembly="Atalasoft.dotImage.Silverlight.Web" Namespace="Atalasoft.Imaging.Silverlight" TagPrefix="cc1" %>

Scroll down to the DIV tag that is hosting the Silverlight object and add the SilverlightWebHandler within this DIV using the code shown below.

<cc1:SilverlightWebHandler ID="SilverlightWebHandler1" runat="server" EnableViewState="False" Visible="false" />

The SilverlightImageViewer stores images into a cache on the server. For this we have to create a new folder for the images and update the Web.config to indicate where the files will be stored.

Right-click on the web project and select Add -> New Folder. Name the folder “ClientImages”. Now open the Web.config and add the following within the configuration tags.

<appSettings>
 <add key="AtalasoftSilverlight_Cache" value="ClientImages"/>
 <add key="AtalasoftSilverlight_CacheLifeTime" value="10"/>
</appSettings>

Silverlight Application

First, add a reference to the Atalasoft.dotImage.Silverlight assembly in the Silverlight application. Then switch to the MainPage.xaml and add this XML namespace to the UserControl:

xmlns:atala="clr-namespace:Atalasoft.Imaging.Silverlight;assembly=Atalasoft.dotImage.Silverlight"

We’re going to make a very simple interface with two buttons and the SilverlightImageViewer. Replace the Grid with the following code:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="24" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Button x:Name="btnAddImage" Content="Add Image" Width="80" Click="btnAddImage_Click" />
        <Button x:Name="btnPrint" Content="Print" Width="80" Click="btnPrint_Click" />
    </StackPanel>
    <atala:SilverlightImageViewer x:Name="Viewer" Grid.Row="1" PageLayout="ContinuousVerticalScroll" />
</Grid>

Open the MainPage.xaml.cs file and add the following using statements:

using System.Windows.Printing;
using System.IO;
using Atalasoft.Imaging.Silverlight;

Next is the core code used to add images to be printed into the SilverlightImageViewer and uses the PrintDocument and our PrintManager to perform the printing operation.

private void btnAddImage_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog dlg = new OpenFileDialog();
    dlg.Filter = "Images|*.jpg;*.png;*.tif";
    dlg.Multiselect = true;
 
    if (dlg.ShowDialog().Value)
    {
        foreach (FileInfo file in dlg.Files)
        {
            using (FileStream fs = file.OpenRead())
            {
                this.Viewer.AddImage(fs, -1);
            }
        }
    }
}
 
private void btnPrint_Click(object sender, RoutedEventArgs e)
{
    PrintDocument doc = new PrintDocument();
    doc.BeginPrint += new EventHandler<BeginPrintEventArgs>(doc_BeginPrint);
    doc.PrintPage += new EventHandler<PrintPageEventArgs>(doc_PrintPage);
    doc.EndPrint += new EventHandler<EndPrintEventArgs>(doc_EndPrint);
    doc.Print("Atalasoft Printing");
}
 
void doc_BeginPrint(object sender, BeginPrintEventArgs e)
{
    this.Viewer.PrintManager.PrepareForPrinting(new CompositePrintPageLayout(CompositePrintLayout.Inch35x50, true), false);
}
 
void doc_PrintPage(object sender, PrintPageEventArgs e)
{
    e.PageVisual = this.Viewer.PrintManager.GetPrintVisual(e.PrintableArea);
    e.HasMorePages = this.Viewer.PrintManager.HasMorePages;
}
 
void doc_EndPrint(object sender, EndPrintEventArgs e)
{
    this.Viewer.PrintManager.PrintingComplete();
}

When the BeginPrint event is raised, we tell the PrintManager to prepare for printing and provide a CompositePrintPageLayout class to print the image as 3.5 x 5 inch formats. Page layouts provide a flexible way for developer to define their own print formatting.

In the PrintPage event we grab the next Visual for printing and let the PrintDocument know if we still have more pages.

Finally, when the EndPrint event is called we let the PrintManager know we are finished so it can clean up resources.

Testing the Application

Press F5 to build and run your application. Once loaded click the Add Images button and select one or more images to print. Once the images have loaded into the viewer, click the Print button to start the printing process.