Home > SURFACE > Handling an XPS document in a Scatterview – Surface SUR40

Handling an XPS document in a Scatterview – Surface SUR40

I have recently been in front of a situation where I was looking for a simple way to display an XPS document in a ScatterView without having to go for a new UserControl in my library.
I used to be lazy by default 🙂

So for that i start by :

  • Creating a simple Surface 2.0 project in VS2010
  • Add a DocumentViewer as a content of a Scatterview
  • Load the XPS document into the documentViewer

Sounds so simple right. Now let’s run your project and you will see that DocumentViewer is not responding to touch.

Simple solution to go, as the first solution we should all have primary in mind, try to see if we can hack the original default template of the DocumentViewer.

Yes we could:

  1.  Simply open your project in Blend and edit the current DocumentViewer template
  2. Look for ContentControl entries and the ScrollViewer element
  3. Replace the ScroolViewer entries by <s:SurfaceScrollViewer>

From that steps apply the style to your DocumentViewer in your project and run your application . Hmm cool you have a ScrollViewer in a Scatterview and you can scroll pages with vertical scrollbar.
Hmmm, yes but why i cannot scroll my document by panning directly the content naturally.

Simple, when you know and after some search, the only thing missing is to set the PanningMode of the SurfaceScrollViewer in the template you define earlier.

Run your application again and now you can manipulate your document page normally with fingers.

Hope it can help others
We use to learn every day simple things which are just nearby your nose 🙂

A full demo project can be download here


Categories: SURFACE Tags: , ,
  1. Madni
    March 14, 2014 at 10:05 am

    It really worked so well :)) Thanks a lot. So, which part of code is able to controls the rotation of XPS document viewer. Can we control its rotation?

    • Serge
      March 14, 2014 at 10:10 am

      Thanks and happy to see it helps you. To control the rotation you have nothing to do. As the main container is a ScatterviewItem you simply need to rotate the scatterview only

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: