Confessions of a .NET Developer!

FlowDocuments in WPF – Part 2

In this post I will be discussing Tables, BlockUIContainers and Floaters.

First lets discuss Tables. As the name suggests, you can display the data in a tabular format. Here is how it will look like :

Tables

Tables

Here is the XAML :

        <FlowDocumentReader Margin="12" Name="flowDocumentReader1">
            <FlowDocument>
                <Paragraph>Time to create a Table</Paragraph>
                <Table>
                    <Table.Columns>
                        <TableColumn Width="100"/>
                        <TableColumn Width="120"/>
                    </Table.Columns>
                    <TableRowGroup>
                        <TableRow FontSize="18" FontWeight="Bold">
                            <TableCell Background="Beige">
                                <Paragraph>Name</Paragraph>
                            </TableCell> 
                            <TableCell Background="Beige">
                                <Paragraph>Company</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph>Gagan</Paragraph>                                
                            </TableCell>
                            <TableCell>
                                <Paragraph>BirlaSoft</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph>Sachin</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Steria</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph>S.A.Kryukov</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Milara Inc</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph>Pulkit</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Infosys</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
                </Table>

Simple isn’t it! To define columns, use Table.Columns and define each column using TableColumn. For the row, its a bit different. Add TableRowGroup which consists of a group of TableRow’s(one for each row) which in turn contains TableCell’s(one for each column). You can do formatting to your columns by providing background colors, font size etc. Cool.

I have discussed Hyperlink in the previous post. Lets move on to BlockUIContainer.
This is one of the important features in FlowDocuments. With BlockUIContainer, you can add “non-content” elements into your FlowDocument such as Buttons, ListBox also including Layout containers like Grid and StackPanel. The only thing is that only a “single” element can be placed in it, though multiple elements can be placed in the StackPanel.
Its easy to use, here is the simple XAML :

                <BlockUIContainer>
                    <Button Height="30"
                            Width="90"
                            Content="Click Me!"
                            Name="btnBrowse"
                            Click="btnBrowse_Click"/>                            
                </BlockUIContainer>

A simple button has been inserted, you can handle the click event in the code-behind of your application.

Next up Floaters! As the name suggests, the contents of your document can “float” in your FlowDocument.
Here is what I meant :

Floaters

Floaters

And here is the XAML :

                <Paragraph>
                    WPF is a completely new presentation framework, integrating
                    the capabilities of many frameworks that have come before
                    it,
                    <Floater HorizontalAlignment="Left"
                             Width="60">
                        <BlockUIContainer>
                            <Image Source="Bear.bmp"/>    
                        </BlockUIContainer>
                    </Floater>
                    including User, GDI, GDI+, and HTML as well as being heavily
                    influenced by toolkits targeted at the Web.
                </Paragraph>

Add the Image “Bear.bmp” or any other picture as a resource in your project for easy access! Image has to be wrapped in a BlockUIContainer.

Do note the way I have placed the Image as a Floater. After the word it, the floater will be placed on the left side of the FlowDocument, and then the following sentence gets added. If you want the Image to be placed at the right, just change the HorizontalAlignment to Right.

That’s it! In the next part, I might bring adding FlowDocument programmatically. Credit goes to this book : Apress Pro WPF by Matthew MacDonald from which I learned.

Thanks for reading! Happy coding! πŸ™‚

Advertisements

April 27, 2011 - Posted by | WPF

2 Comments »

  1. Thanks again. I think this is just another part of the same article, right. I look at it.
    –SA

    Comment by SA | April 27, 2011 | Reply

    • You’re welcome SA, glad you liked it! πŸ™‚

      Comment by tarundotnet | May 4, 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: