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 :
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 :
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! 🙂
2 Comments »
- How to convert bytes to BitmapImage WPF
- Auto-fixing height and width of Button in WPF DataGrid
- How to enlarge or re-size Calendar in WPF DatePicker
- Saving forms settings(location, height) using Serialization
- Give underline effect to a textbox in WPF using Adorners
- Tricky delegates
- How to dynamically load assemblies including unreferenced assemblies
- Using Extension methods – Convert Image to Byte or Base64
- Allow numbers or letters and disable right-click in textbox
- How to use Owner Drawn Controls
- WPF Tutorial : Drawing Visual