This project is read-only.

How To Use The DocumentViewer


Document Toolkit for LightSwitch contains a DocumentViewer control representing a viewer for documents of type XPS, PDF, and various Microsoft Office documents. Documents which are available as Binary data type can be viewed with the DocumentViewer control.

Take for instance the scenario where you have documents stored in a table. You would typically use the Binary data type to store the actual documents. You can use this value to display the document directly in your LightSwitch application using Document Toolkit. The following step-by-step tutorial demonstrates how to use a property having the Binary data type to display documents.

1) Create a new LightSwitch project and enable the Document Toolkit for LightSwitch extension (see also How To Install Document Toolkit for LightSwitch).

2) Add a new screen (Right-mouse click Screens > Add Screen..)

3) Select New Data Screen, enter a screen name and leave the Screen Data empty. Press Ok

4) Change the screen layout to a Table Layout and disable vertical scrolling by setting the property Vertical Scroll Enabled to false in the property grid.

TableLayout.png

5) Click Add Data Item... and select Local Property of type Binary. Name the property Document

AddDataItem.png

6) In the designer, add the new Document data item to the screen and change the control type to Document Viewer Control as is shown in the following picture.

DocumentViewerControl.png

We now have created a binding between the property Document of type Binary and the Document Viewer Control. If we assign a valid document to the Document property, it will be rendered automatically by the Document Viewer Control.

7) Select the Screen Command Bar and add a new button. Create a new method called LoadDocument

AddButton.png

8) Right-click the created button and select Edit Execute Code

EditExecuteCode.png

9) Enter the following code for the LoadDocument_Execute method. Make sure you include the using (or imports for VB.NET) statements as well.

C#
using Microsoft.LightSwitch.Threading;
using System.Windows.Controls;
using DocumentToolkit.Client;

partial void LoadDocument_Execute()
{
  Dispatchers.Main.Invoke(() => {
    var dlg = new OpenFileDialog();
    if (dlg.ShowDialog() == true) {
      // load document as binary (== byte[])
      using (var reader = DocumentReader.Create(dlg.File)) {
        this.Document = reader.ToBinary();
      }
    }
  });
}

VB.NET
Imports Microsoft.LightSwitch.Threading
Imports System.Windows.Controls
Imports DocumentToolkit.Client

Private Sub LoadDocument_Execute()
  Dispatchers.Main.Invoke(
    Sub()
      Dim dlg = New OpenFileDialog()
      If dlg.ShowDialog = True Then
        ' load document as binary (== byte[])
        Dim reader = DocumentReader.Create(dlg.File)
        Using reader
          Me.Document = reader.ToBinary
        End Using
      End If
    End Sub)
End Sub

Note: Dispatchers.Main.Invoke ensures the code is run on the UI (= Main) thread. By default screen code runs in a background thread. This code only works for desktop applications, you'll get a SecurityException 'Dialogs must be user-initiated.' when deployed as a web application. There is currently no good solution to initiate dialogs in web applications. For a workaround see this blog post by James.


A file dialog is used to select a file from disk. Using the DocumentReader that comes with Document Toolkit the selected file is read and translated to a binary (byte array) value. The value is subsequently assigned to the Document property.

10) Hit F5 to compile and run the application. Select the created screen and click the Load Document button. Select an XPS, PDF or Microsoft Office document (requires Office 2007 or 2010) and the document is rendered in the viewer. Your application should look similar to this screenshot.

ScreenShot.png

Next step: learn to change the look and feel of the document viewer in How To Customize The DocumentViewer.

Last edited Sep 26, 2011 at 9:55 PM by kozw, version 15

Comments

LeonFord Jan 21, 2013 at 10:06 PM 
I agree, you must make this work in a Lightswitch Web application! Useless to me otherwise!

bessis Nov 22, 2012 at 2:03 AM 
Good idea but not finished job : after installed and set in your project,, you have to reach the point where, you are ready to use it to find out accidentally that it does not work on web projects ! Very disappointing, spécially when you see there in a workaround, (says James) that should have been included in the extension itself or a parent custom control. I am waiting for a complete solution.
Same for Pdf ; its the mostly used format. Without it, a major part is missing.