WPF Flow Document For Beginners

As part of an article that I am creating for www.codeproject.com, I decided to look into using the System.Windows.Documents namespace and have a look at seeing if I could make a semi-cool’ish looking document.

Now when you use FlowDocuments, there are several container WPF container controls which you may host a FlowDocument in. These WPF container controls vary in what they provide. Let's see the difference, shall we?

• FlowDocumentScrollViewer: Simply displays the entire document and provides a scroll bar -  like a web page
• FlowDocumentPageViewer: Shows document as individual pages, and allows user to adjust zoom level
• FlowDocumentReader: Combines FlowDocumentScrollViewer and FlowDocumentPageViewer into a single control, and exposes text search facilities

For example, a FlowDocumentPageViewer is as shown below:

For those of who have not come across the FlowDocument, here is a list of some of the things that can be done with it:

• Allow paragraphing
• Allow anchoring of images
• Allow hyperlinks
• Allow text blocks
• Allow tables
• Allow subscript/superscript text
• Allow UIElements (such as Button, etc.)
• Allow text effects

Think of FlowDocument(s) as a mini desktop publishing type interface. Though I’m sure things like Quark are going to yield more flexibility. Nevertheless, the results of FlowDocument(s) could be thought as being able to create that sort of page publishing type layout.

What I’m going to do now is show you how to create a few of the various FlowDocument elements both in XAML and in code as they are little different actually.

Paragraph

In XAML

<!– FLOW DOCUMENT VIEWER START –>    
<FlowDocumentPageViewer x:Name="flowDocViewer"  Margin="0,0,0,0″ 
    Background="#FF414141″ Zoom="80″ >         
<!– FLOW DOCUMENT START –>
<FlowDocument x:Name="flowDoc" Foreground="White" FontFamily="Arial"  >
<Paragraph x:Name="para1″ FontSize="11″>

The following details have been obtained from Amazon to match your initial query. Some of the returned values may have been empty, so have been omitted from the results shown here. Also, where there have been more than one value returned via the Amazon Details, these too have been omitted for the sake of keeping things simple for this small demo application. Simple is good, when trying to show how something works.

</Paragraph>
</FlowDocument>
</FlowDocumentPageViewer>

In C# Code Behind

Paragraph paraHeader = new Paragraph();
paraHeader.FontSize = 12;
paraHeader.Foreground = headerBrsh;
paraHeader.FontWeight = FontWeights.Bold;
paraHeader.Inlines.Add(new Run("Paragraph Text"));
flowDoc.Blocks.Add(paraHeader);

Hyperlinks

In XAML

<Paragraph FontSize="11″>
     <Hyperlink  Click="hl_Click" 
     NavigateUri="www.google.com">Click Here</Hyperlink>
</Paragraph>

In C# Code Behind

Paragraph paraValue = new Paragraph();Hyperlink hl = new Hyperlink(new Run(
    "Click Here To View The Link Data"));
hl.FontSize = 11;hl.NavigateUri = new Uri(nonNullprop.PropertyValue);
hl.Click += new RoutedEventHandler(hl_Click);paraValue.Inlines.Add(hl);
flowDoc.Blocks.Add(paraValue);

Embedding UI Elements

In XAML

<BlockUIContainer>
    <Button Width="60″ Height="60″ Click="Button_Click">
        Click me
    </Button>
</BlockUIContainer>

In C# Code Behind

BlockUIContainer uiCont = new BlockUIContainer();
Button b = new Button();
b.Width = b.Height = 60;
b.Click += new RoutedEventHandler(Button_Click);
b.Content = "Click me";
flowDoc.Blocks.Add(uiCont);

Of course, this is only touching the surface of what can be done with FlowDocuments. But it gives you an idea of how flexible the formatting of documents is with WPF.

The screen shot below shows an example with some Paragraphs/Tables/Hyperlinks and UIElements in place.