WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Windows Presentation Foundation (WPF aka "Avalon") is a massive step forward for Windows client development, and delivers a super-rich .NET UI framework that integrates vector graphics, rich flow text support, and 3D visualization with a powerful control model framework.  You get WPF support with .NET 3.0 (which is built-in with Windows Vista and available as a separate download for other Windows OS versions).

Visual Studio "Orcas" will ship with a rich WYSIWYG designer and project support for developers to easily build WPF applications.  The Microsoft Expression suite of designer products will also then provide killer support for designers to work on WPF visuals and interactivity (Expression Blend in particular is optimized for this).

Both Visual Studio and Expression share the same project file format - which means that developers and designers can seamlessly work on a single project together, without stepping on each other's toes during the process (XML based XAML files define the UI and style of an app, separate .cs/.vb files contain the code-behind for a programmer to develop against them).  You can download the Beta 2 version of Microsoft Expression today.  In the next few weeks we'll be shipping the "February CTP" of Visual Studio "Orcas" on the web, which will have the WPF designer built-in and provide great coding support for WPF.

WPF Text Reading and Flow Document Features

WPF includes a tremendous amount of rich typographical support that dramatically improves how text is rendered to the screen, and significantly improves the digital text reading experience.  Advanced typographical features like ClearType support for sub-pixel positioning and y-direction smoothing, and OpenType features like ligatures, traditional numerals, swashes, and contextual alternatives make the quality of text much, much higher compared with standard HTML or other Windows client graphics technologies, and can significantly increase the speed with which a user can read content.

WPF also provides built-in Flow Document support as part of the UI layout and control model experience.  Flow Document capability enables automatic support to reflow content within an application depending on the window size, content semantics, and device resolution of the application.  For example, you could load text, images, videos and any other WPF control within the FlowDocumentPageViewer control in WPF, and then have it automatically size and paginate the text across multiple columns and/or pages of content for you automatically.

Below is an example of this in action with the New York Times Reader application (more on this app later in this blog post).  Notice how the article is automatically wrapped across two columns, and note the "Page 1 of 2" navigation and Zoom UI at the bottom of the screen:

To help illustrate how you can achieve the same content flow behavior yourself in your own applications, I built a simple sample below using WPF's built-in FlowDocumentPageViewer control.  Below is the entire contents of the application (it is all XAML - no code-behind code necessary):

<Window x:Class="WPFApplication1.Window1"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Title
="Window1" Height="300" Width="300">
    
<Grid>
    
<FlowDocumentPageViewer>
        
       
<FlowDocument>
            
        
<Paragraph>
           This is a paragraph of text.
        
</Paragraph>
                
        
<Paragraph>
           This is another paragraph of text.
        
</Paragraph>
                
        
<Paragraph>
           My movers are carrying my TV out right now.
        
</Paragraph>
                
        
<Paragraph>
           I hope that loud bang wasn't the TV being dropped.
        
</Paragraph>

        
<BlockUIContainer>
           
<Button Content="Button" />
        </
BlockUIContainer>
                
        
<Paragraph>
           This is another paragraph.
        
</Paragraph>

        
</FlowDocument>
        
       
</FlowDocumentPageViewer>

    
</Grid>
</Window>

Now when I run the application I get a window that is 300x300 pixels wide by default with this content:

As you'd expect, I get several paragraphs of text.  Note how I was also able to embed a WPF Button control directly within the content (I could put any WPF control within it).  Note also the automatic content paging control and content sizing slider that is also provided above by the FlowDocumentPageViewer.

Now when I resize the Window to make it shorter and wider, you'll note how the content is automatically paged for me by the FlowDocumentPageViewer into two columns.  I did not have to write any code to get this behavior:

I could also then narrow the Window slightly, and zoom in the content (using the slider at the bottom).  Note how the content (both the text and the button) get bigger on the screen, and how the FlowDocumentPageViewer control is now automatically paging the content for me (I've circled the appropriate UI in red below to indicate it):

As you can see - this is really easy to achieve, and the result is a simple but powerful application.  Rather than hard-code the content within the application, I could obviously instead call out to a web-service or RSS feed and populate the content dynamically.  I'd get the same paging and flow semantics.

New York Times Reader, Daily Mail Reader, and Seattle Post-Intelligencer Reader WPF Applications Now Available

The WPF text support really opens up a tremendous number of opportunities to create deeper, more personalized reading experiences (among other things it is screaming out to be used by a blog reader client).  

My team has been working with a number of Newspaper and Magazine publishers to help them develop and launch personalized reader applications for their content.  In addition to providing rich text support, each of these reader applications supports offline content support (meaning you sync the content when you are online, and can then read everything offline while not on a network - which is ideal for when you are on a plane, train or bus, etc).  The reader applications also provide rich search visualization and content annotation support:

This past September the New York Times launched this customized New York Times Reader application (click here to download and use it for free):

Today the Seattle Post-Intelligencer launched as well (click here to download and use it for free):

As did the Daily Mail in the UK (click here to download and use it for free):

Many more well-known publishers will be launching similar applications in the months ahead. 

We are also going to be releasing a Reader SDK for publishers that will enable anyone to build similarly customized reading applications.  Sites will be able to expose RSS feeds with custom extensions (to embed optional pagination rules, advertising placement details, etc), and then developers will be able to easily build custom WPF reader client applications to further enhance the experience.

Tim Sneath talks about this a little more about this work on his great blog here.

How to Learn More about WPF

To learn more about Flow Document support in WPF, I recommend reading this great MSDN article here.

There are a number of good WPF books that have recently been published that can also help you come up to speed with WPF.  Adam Nathan has published a very good Windows Presentation Foundation Unleashed book that is out today and has received great reviews on Amazon (5 out of 5 starts with 10 reviews):

Chris Sells and Chris Anderson each have WPF books coming out in the next few months that I've seen early drafts of and really like.  Here is a pointer to Chris Anderson's Essential WPF book on Amazon (it will be published in April).  I've just started reading Chris Sell's updated WPF book and really like his book as well - I'll update this blog post with a link to it on Amazon once it is available.

Hope this helps,

Scott

Published Thursday, February 22, 2007 12:11 PM by ScottGu
Filed under: , ,

Comments

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Thursday, February 22, 2007 4:07 PM by XAML

Let's not forget about Charles Petzold's book - "Applications = Code + Markup". It's pretty good and it's already out there.

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Thursday, February 22, 2007 4:19 PM by Mike-EEE

Hey Scott... Great article!  I myself am *very* excited about .NET3.0 and have been learning a lot about WCF lately.

WPF is next.  My big question for you is: where does WPF/E put all the great work done with Ajax Extensions? :)  Are they mutually exclusive technologies?

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Friday, February 23, 2007 1:19 AM by Vikram

This is cool, I would like some blogs about WPF/E form you. Really want to get in the WPF/E era

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Friday, February 23, 2007 2:32 AM by ScottGu

Hi Vikram,

I'll be posting more about both WPF and WPF/E over the next month or two.  They are both really exciting and fun technologies.

Thanks,

Scott

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Friday, February 23, 2007 2:34 AM by ScottGu

Hi Mike-EEE,

WPF/E and ASP.NET AJAX are actually very complimentary technologies.  You can use the JavaScript type-system and JSON networking stack of ASP.NET AJAX, for example, to perform call backs and then databind the results with WPF/E to visualize them.

I'll be doing blog posts on some of these scenarios in the near future.

Thanks,

Scott

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Friday, February 23, 2007 8:52 AM by Stuart

another quality post by you Scott on this latest newspaper app craze!

I also can't wait to get started with WPF.

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Friday, February 23, 2007 10:31 AM by Darren Fieldhouse

Hi Scott,

I've been working with WPF and the November CTP of the Visual Studio 2005 extensions for .NET 3.0.

My question is this: Will there be anymore releases of the extensions or will I need to use the Orcas CTP from now on to see improvements to the designer?

Thanks,

Darren

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Friday, February 23, 2007 11:21 AM by austin a

Simple question:

Since there's no codebehind, I thought I could copy the XAML into Notepad and save it as xxx.xaml and double-click it to have IE7 display it (IE7 in Windows XP), but IE displays a security exception:

System.Security.SecurityException: Request for the permission of type 'System.Security.Permissions.SecurityPermission, mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' failed.

Can you enlighten me if this xaml must be compiled or if merely having IE7 is not enough?

Thx

Looking forward to another helpful series of webcasts from MIX07.

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Sunday, February 25, 2007 6:43 PM by Mark Wisecarver

Thanks bro.

WPF is going to make my on-line cartoons better than ever.

The Ajax ControlToolkit has already allowed images to look nicer.

No more need to create multiple layers or to use the PNG format in an on-line community.

More obvious now than it has ever been that nobody offers us what Microsoft does.

btw that lawsuit against MS over the MP3 format stinks to high heaven.

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Monday, February 26, 2007 11:57 AM by ScottGu

Hi Austin,

When run inside IE, xaml is executed in the sandbox. The root <Window> element is not allowed in a sandbox (no popups outside the browser window)--- thus the reason for the security permission error.

Page or FlowDocument (without x:Class) would be appropriate roots to use instead. Since your example is FlowDocument based, I’d recommend FlowDocument…when you navigate it, we’ll use the appropriate viewer.

Hope this helps,

Scott

P.S. Special thanks to Rob Relyea from the WPF team who sent me this answer!

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Tuesday, February 27, 2007 6:50 AM by Sheva

 Scott, as to respect to Ian Griffiths, you should mention him instead of merely mentioning Chris Sells, because AFAIK, Ian Griffiths is the major author of that book.

Sheva

# re: WPF Text Reading and Flow Document Support, and the new NYTimes, Daily Mail, and Seattle Post-Intelligencer Reader Applications

Thursday, March 15, 2007 3:00 PM by Chris Sells

Sheva, the page count production is 60/40 Ian/Chris, so Ian does deserve (at least!) 60% of the credit. : )

# Saving a WPF Xaml FlowDocument to XPS with working DataBinding

Saturday, October 18, 2008 6:47 AM by Fohjin.com

I needed to create an invoice system, where the look and feel of the invoice could differ and also of

# un titre

Tuesday, October 21, 2008 3:14 AM by DotNetKicks.com

You've been kicked (a good thing) - Trackback from DotNetKicks.com