Geeks With Blogs

Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

I am using this blog to assist other beginner/intermediate developers with anything that deals with developing software. I also use this blog to help myself remember things or ideas. This is the first blog post on several ideas that I have using WPF and would like to share with the community. Some of my ideas may be crazy or far-fetched but I would like to think of myself as a little strange anyways.

This post is about using the FlowDocument to create an “About” box. First, an overview straight from Microsoft.

“A flow document is designed to "reflow content" depending on window size, device resolution, and other environment variables. In addition, flow documents have a number of built in features including search, viewing modes that optimize readability, and the ability to change the size and appearance of fonts. Flow Documents are best utilized when ease of reading is the primary document consumption scenario. In contrast, Fixed Documents are designed to have a static presentation. Fixed Documents are useful when fidelity of the source content is essential. See Documents in WPF for more information on different types of documents.

The following illustration shows a sample flow document viewed in several windows of different sizes. As the display area changes, the content reflows to make the best use of the available space.”

If most “About” boxes are text, that have some interactivity, then how would it look if we built our “About” box using the FlowDocument in WPF?

Below is an example of one that I created:


As you can see at the bottom of the screen you could flip pages, change the view, zoom in/out or even search for text on the screen. This method would only involve code for the click events (on the button for example). Everything else is done in pure xaml as shown below:

<Window x:Class="WPFExam.MainWindow"
        Title="About" mc:Ignorable="d" xmlns:d="" 
        xmlns:mc="" Height="282" Width="245">
        <FlowDocument FontSize="12">
            <Paragraph FontSize="14" TextAlignment="Center">About:</Paragraph>
        <Paragraph TextAlignment="Left" FontSize="12">
            Please continue to visit <Bold></Bold> 
            for more tips/tricks on the .net framework. You can even have 
            interactive buttons like this one: <Button Content="Click me" Click="Button_Click_1"></Button>
                <ListItem><Paragraph>Tools and Utilities 
                    for the .NET Developer</Paragraph></ListItem>
            <Paragraph TextAlignment="Left" FontSize="12">
            You may also want to check out my <Italic> tools/utilities </Italic>
                for the .NET developer page at 

Simple enough right? If you have any questions/suggestions/comments then please feel free to drop me a line on my contact page above.

Posted on Tuesday, June 22, 2010 1:21 PM | Back to top

Copyright © mbcrump | Powered by: