How To Create My First Document Viewer

The following step-by-step tutorial demonstrates how to create a simple Document Viewer using Visual Studio 2010. The download link for the complete source code of this tutorial is available at the bottom of this page.

1) Open Visual Studio 2010 and create a new Silverlight 4 application

2) Use NuGet to add references to the DocumentToolkit package (see How To Install Document Toolkit using NuGet).

3) Add an existing XPS document to the project as content. Right-click the project, select Add > Existing Item... and select an XPS document from disk. Make sure you set the Build Action to Content, which causes the document to appear as file in the XAP package.

You can use NuGet to install sample documents from the DocumentToolkit.SampleDocs package.

4) Open the MainPage.xaml and add the following XML namespace declaration:

xmlns:doc="http://schemas.firstfloorsoftware.com/documenttoolkit"

5) Create an instance of the DocumentViewer by adding the following elements to the page XAML;

<Grid x:Name="LayoutRoot">
  <doc:DocumentViewer x:Name="Viewer" /> 
</Grid>

6) In order to load documents we need to use a DocumentDataSource. The DocumentDataSource control is the object that takes care of loading documents and manages page collections. Add a DocumentDataSource to the page XAML like so:

  <doc:DocumentDataSource x:Name="DataSource" LoadError="DataSource_LoadError" />

7) Make sure the LoadError event handler is implemented in the code-behind. The below snippet simply displays an error messagebox.

using FirstFloor.Documents.Controls;

private void DataSource_LoadError(object sender, ErrorEventArgs e)
{
    MessageBox.Show(e.Error.Message);
}

8) Now we need to associate the DocumentViewer with the DocumentDataSource using an element binding. When a DocumentDataSource is assigned to the DocumentViewer, the viewer will display the pages of document loaded by the DocumentDataSource. Modify the DocumentViewer element:

  <doc:DocumentViewer x:Name="Viewer" DocumentDataSource="{Binding ElementName=DataSource}"  /> 

9) To load a document we need to assign a PackageReader to the DocumentDataSource. A PackageReader reads the actual pages, images, fonts, etc. from a document. The following code snippet demonstrates how the XPS document that was previously added as content to the project is assigned to the data source as the DefaultPackageReader

using FirstFloor.Documents.IO;

this.DataSource.PackageReader = new DefaultPackageReader(new Uri("Document Toolkit.xps", UriKind.Relative));

Once a PackageReader is assigned to the data source, the document will be loaded asynchronously by the data source. When the document is loaded, the proper change notifications are raised. The element binding ensures the DocumentViewer automatically displays the content of the loaded document.

And there you have it, with only a couple of lines of XAML and C# code we now have a fully functional document viewer.

Tutorial source code: MyFirstDocumentViewer.zip


Last edited Jul 4, 2011 at 8:24 PM by kozw, version 12

Comments

kozw Apr 18, 2011 at 9:15 AM 
@SamoBellows: please ensure you have the document build action set to 'Content'

kozw Apr 18, 2011 at 9:14 AM 
@interubidus: Document Toolkit assemblies are now also available using NuGet. It makes referencing and updating Document Toolkit super easy.

SamoBellows Feb 2, 2011 at 9:24 PM 
This demo is about as simple as it can be, but i get this error when i follow it to a T.

Resource 'Document Toolkit.xps' not found

I did not download the source code, i started a fresh project. added the DLL references, added the XAML code, and the C# code as written. seems pretty clear, but it wont load the file. I should mention that it does the same thing if i make the silverlight app stand alone, or hosted in a new website as well.

Anyone have any light to shed?

inturbidus Oct 27, 2010 at 6:50 PM 
I realized that I had forgotten to unblock the DLLs. :)

inturbidus Oct 27, 2010 at 6:31 PM 
I downloaded the Source Code for this tutorial and I get an error "The type or namespace name 'DocumentViewer' could not be found. The references were invalid in the sample so I downloaded the evaluation and added references to FirstFloor.Documents.dll and FirstFloor.Documents.Controls.dll. Still no luck. Any help?