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

2 Comments

  • 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

  • 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

Comments have been disabled for this content.