Thursday, October 08, 2009

Introduction to FlowDocument for Silverlight.

by StefanOlson via Stefan Olson's Blog on 10/8/2009 3:37:50 PM

As mentioned in my previous post. I have developed FlowDocument viewers for Silverlight which are intended to be API compatible with the WPF FlowDocument viewers. FlowDocuments give you the ability to display rich text content and are a feature of WPF.

Unfortunately this functionality is not currently available in Silverlight. When building the Virtual Tour Viewer I needed to flow documents, because the WPF version already displayed its text using flow documents. The solution was to build my own flow document viewer for Silverlight.

Here's what it looks like in the virtual tour viewer:

And here's what it looks like in the sample application for it:

This unfortunately was not quite as easy as it might sound. The first problem is caused by the fact that flow documents are xaml, but the Silverlight xaml parser will not read them because they contain classes that are not in the default namespace. This unfortunately means that the documents have to be read using Linq to XML , which is a lot more work.

WPF has a couple of different types of FlowDocument viewers, the FlowDocumentScrollViewer, which as you might imagine scrolls the document. Then there is a FlowDocumentPageViewer, which displays it either in pages or columns. These are then brought together into a single FlowDocumentReader class, which as you can see in the sample above provides support for zooming and changing between these modes.

The flow document viewer as it currently stands provide support for most of the basic flow document structures as you can see above in the sample. Some features, such as embedded controls are not currently demonstrated. I intend to add support for lists and hyperlinks before release.

Unfortunately as you can imagine a project like this can take up quite a bit of time. I would love to release this as open source, but I do need to do a little bit of cleanup before it can be released, which takes time I have to take off other (paying) work. If you would like to see that flow document viewer made available, please submit a 5 star vote for the Virtual Tour Viewer in the ComponentArt Silverlight coding contest. If I win this, which your votes will help, I will release the FlowDocumentViewer and the RoutedCommand support I’ve built for Silverlight onto codeplex.

Using the FlowDocumentReader

Loading a FlowDocument

here's how you load of flow document from the resources:

StreamResourceInfo r = Application.GetResourceStream(new Uri("test.flowdoc", UriKind.RelativeOrAbsolute));
StreamReader sr = new StreamReader(r.Stream);
XElement el = XElement.Load(sr);

FlowDocument fd = FlowDocument.Load(el, FlowDocumentStyles, null, null);

Displaying a FlowDocument

To display a FlowDocument you need a FlowDocument viewer of some kind and to set the Document property. This can be done by binding, or in code as shown below:

In Xaml (the control):

<Controls:FlowDocumentReader Grid.Row="1" Foreground="White" x:Name="_Viewer"/>

In code:

_Viewer.Document = fd;

I hope that this has wet your appetite for what is possible with flow documents, and hopefully I'll win the Silverlight contest and have time to release it as open source!

Please Vote for the virtual tour viewer by clicking here