Creating Your First Document ViewerDocument Toolkit Help

The following step-by-step tutorial demonstrates how to create a simple Document Viewer using Visual Studio 2010.

Creating a Document Viewer

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

  2. Add references to the assemblies FirstFloor.Documents.dll and FirstFloor.Documents.Controls.dll. See Installation for instructions on installing the binaries on your machine.

  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 snippet below simply displays an error messagebox.

    C#
    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;

    C#
    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.

Next Steps

Now that you have created your first simple document viewer, it is highly recommended to take a look at the Document Toolkit Extensions project for more tutorials and samples. The project contains an extensive set of samples, document converters and utilities for Document Toolkit. Document Toolkit Extensions is a great starting point to learn about how to incorporate Document Toolkit into your application.