How To Create A Simple 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) Create a new Silverlight 4 application

2) Add references to the assemblies FirstFloor.Documents.dll and FirstFloor.Documents.Controls.dll. Both assemblies can be downloaded from http://firstfloorsoftware.com/documenttoolkit/evaluation-version/.

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

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

4) This simple viewer features a selectable ThumbnailListBox and a DocumentViewer. Add the following elements to the page XAML;

<Grid x:Name="LayoutRoot">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="136" />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <doc:ThumbnailListBox x:Name="Thumbnails" />
  <doc:DocumentViewer x:Name="Viewer" Grid.Column="1" /> 
</Grid>

5) The User Interface elements are now in place. In order to load documents we need to use a DocumentDataSource. The DocumentDataSource control is the object that takes care of loading XPS documents and manages page collections. Add a DocumentDataSource just above the ThumbnailListBox we added earlier:

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

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

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

7) Both ThumbnailListBox and DocumentViewer need to be associated with the DocumentDataSource. Element binding is used to connect both controls to the data source. Replace the ThumbnailListBox and DocumentViewer with the following:

  <doc:ThumbnailListBox x:Name="Thumbnails" DocumentDataSource="{Binding ElementName=DataSource}" />
  <doc:DocumentViewer x:Name="Viewer" Grid.Column="1" DocumentDataSource="{Binding ElementName=DataSource}"  /> 

8) DocumentDataSource needs a PackageReader which provides access to a document. The following code snippet demonstrates how a document that is available as content in the XAP package is assigned to the data source;

using FirstFloor.Documents.IO;

this.DataSource.PackageReader = new DefaultPackageReader(new Uri("Documents/WhitePaper.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 bindings ensures the UI controls automatically display the content of the loaded document.


Tutorial source code: SimpleDocumentViewer1.zip

Last edited Jun 28, 2010 at 12:35 AM by kozw, version 13

Comments

No comments yet.