Confessions of a .NET Developer!

FlowDocuments in WPF Part 1

WPF brings out FlowDocument for readability purpose which has numerous in-built features for easing viewing of text. It actually consists of a number of blocks and resembles with HTML.
For more reading head to this link :

The MSDN says there are four types of controls:
– RichTextBox
– FlowDocumentReader
– FlowDocumentScrollViewer
– FlowDocumentPageViewer

Here I will be using FlowDocumentReader because the 3rd and 4th controls are in-built in it specified as “modes” of viewing.

Lets get started now. First of all, add the FlowDocumentReader component in your toolbox. Like below :

1) Right click on Controls header from the ToolBox and select Choose Items.

ChooseItems

ChooseItems

2) A window will open, select “WPF Component”, check the controls and click Ok.

WPF Components

WPF Components

There now we can start.
Check out this window :

SimpleWindow

SimpleWindow


That’s how a flow document will look like.

Lets try the “FlowDocumentPageViewer” mode by clicking the second control to left of the zoom control.

PageMode

PageMode

And in the Scrolling mode.

ScrollMode

ScrollMode

This is how the self-explanatory object structure of a FlowDocument looks like(taken from MSDN):

Object Model

Object Model

Here is the XAML code to create the first page of the above window :

    <Grid>
        <FlowDocumentReader Margin="12,12,12,0" Name="flowDocumentReader1">
            <FlowDocument>
                <Paragraph>
                    <Italic FontWeight="Bold">FirstParagraph</Italic>
                </Paragraph>
                <Paragraph FontFamily="Verdana"
                           FontSize="14">
                    <Run>A flow document is designed to "reflow content" depending 
                         on window size, device resolution, and other 
                         environment variables.
                    </Run>           
                </Paragraph>
                <Paragraph>
                    <Run>
                        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.                    </Run>
                    <Hyperlink Click="Hyperlink_Click">Now this is a hyperlink</Hyperlink>
                </Paragraph>
              </FlowDocument>
             </FlowDocumentReader>
       </Grid>

As you see, the document consists of paragraphs, where you can set the Font properties, background etc. The “Run” element is used specifically for Text only.
I have also added a Hyperlink, you can handle the click event in your code-behind, such as opening a Firefox browser etc.
You can search text which is its in-built feature together with zooming.

We can also create a List of items which look like Bullets.
Here is a window that displays it :

List

List

Here is its XAML :

                <List>
                    <ListItem>
                        <Paragraph>Tarun</Paragraph>
                    </ListItem>
                    <ListItem>
                        <Paragraph>Kumar</Paragraph>
                    </ListItem>
                    <ListItem>
                        <Paragraph>Singh</Paragraph>
                    </ListItem>
                </List>
                
                <Paragraph>A numbered List</Paragraph>
                <List MarkerStyle="Decimal">
                    <ListItem>
                        <Paragraph>WPF is awesome!</Paragraph>       
                    </ListItem>
                    <ListItem>
                        <Paragraph>Indeed it is</Paragraph>
                    </ListItem>
                </List>

Set the Marker style to get different ways of specifying the bullets and numbers.
See how neatly it has presented it.

That’s it for the first part. Next part will be about Tables and Floaters. Stay tuned! 🙂

Advertisements

April 25, 2011 - Posted by | WPF

1 Comment »

  1. Hi Tarun,

    Thank you for sending me a notification.

    Your site and content is very interesting.
    Formatting and functionality is pretty good; I especially like “view source” (most robust way of presenting codelets) and other controls on the right of the source code; many sites have problems with that.

    You also might want to some copyright notice with reference such as CC (Creative Commons)logo or whatever else.

    Unfortunately I don’t have enough time for reading of all of that but would appreciate is you notify my on most interesting or unusual publications.

    Thank you.
    –SA

    Comment by SA | April 26, 2011 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: