Providing readability of text to a greater extent across all window sizes and
monitor resolutions is the characteristic of Windows Presentation Foundation
Flow Documents. In simple terms, A Flow Document is nothing but simple combination
of text, audio, video, images ext. in such a way that the user can watch these
documents at every resizable extent irrespective of the resolution of the
monitor or sizes of the windows, otherwise the documents would have grown fuzzy
and blurred and pixilated at higher resolutions but WPF Flow Documents
gives the opportunity to read these documents at all resolutions.
A few terms that we will come across while dealing with Texts in WPF.
FlowDocuments : These are useful tools of WPF which change itself
automatically according to the resolution or window sizes. This is the salient
feature that makes it a unique one.
FlowDocumentReader : It is a very sophisticated tool for viewing the flow
documents. There are three modes of viewing documents - Page mode, Two Page mode
and Scroll mode. It also provides the feature of searching within the document.
It also has resizing tools to view texts at different resolutions.
FlowDocumentPageViewer : This can be assumed as viewing the page of
FlowDocumentReader without search feature and without options for modes.
FlowDocumentScrollViewer : This feature allows the viewer to view long texts
using scroll bar.
RichTextBox : This feature of flow document allows user to add, edit and view
texts but there is no option for resizing, searching, and adding texts into
columns automatically.
Now lets start Creating FlowDocument
Step 1 : Since we are going to create FlowDocumentScrollViewer in Blend so
Launch Expression Blend and select WPF --> WPF application.
Step 2 : Now you have the artboard in front of you, all you need to do is go to
assets and search for FlowDocumentScrollViewer. After this the control appears
in the panel, select this control and drag it on the artboard.
Step 3 : Select the FlowDocumentScrollViewer control on the artboard and
resize it. For resizing either resize through the selection tool by extending
the boundaries of the control or goto the menu bar Object-->Auto size--> fill.
This fills the control on the artboard completely.
Step 4 : Now rename the text in the flowdocument and its respective XAML
coding appears like this:
Step 5: Select the document and Right click on it --> Group into --> Grid. This is done to allow images,videos etc to get easitly added to the Document
Step 6: Now Adding a Toolbar (by which user can resize the text) to the
FlowDocumentScrollViewer. By default this property is disabled, to enable this
property select the control and goto--> property --> miscellaneous -->mark Check
box IsToolbarVisible.
Creating a FlowDocumentReader and FlowDocumentPageViewer in Blend
This is another good feature that we can create other FlowDocuments from the
existing FlowDocument, the only thing need to do is make small changes in the
tags in XAML. For example to change FlowDocumentScrollviewer to
FlowDocumentReader we just need to modify the starting tags as shown in the fig. Similarly we can change it to FlowDocumentPageViewer also.
Now FlowDocumentScrollViewer in above image is change to FlowDocumentReader in image below:
Now Adding Text to the Document : There are two ways to Enter the text
into the document either by selecting the FlowDocument from the artboard and
Right click--> Edit text or through XAML coding, in this tags are used to enter
the text in the FlowDocument as shown in the fig below.
Now adding image to the FlowDocument : For adding image Double click
the FlowDocument to make it active the select the image and drag it into the
FlowDocument. This image can be resized and adjusted according to the need.
Output : Finally On pressing F5 the following output is generated
which shows a FlowDocument enriched with Text as well as image. Apart from this
the FlowDocument also has resizing tools at the bottom to view the document at
any resolution.
Hope this article provides you sufficient help to get acclimatized with Expression Blend.