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:
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.
2) A window will open, select “WPF Component”, check the controls and click Ok.
There now we can start.
Check out this window :
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.
And in the Scrolling mode.
This is how the self-explanatory object structure of a FlowDocument looks like(taken from MSDN):
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 :
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! 🙂
1 Comment »
- 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