#252 – FlowDocument Flows its Content Automatically

A FlowDocument automatically flows its content to fit its current size.  In the example below, we include a FlowDocument in a FlowDocumentScrollViewer:

	<FlowDocumentScrollViewer>
		<FlowDocument FontFamily="Cambria" FontSize="14">
			<Paragraph>
There was no possibility of taking a walk that day.  We had been wandering, indeed, in the leafless shrubbery an hour in the morning; but since dinner (Mrs. Reed, when there was no company, dined early) the cold winter wind had brought with it clouds so sombre, and a rain so penetrating, that further out-door exercise was now out of the question.
			</Paragraph>
			<Paragraph>
I was glad of it: I never liked long walks, .. etc. etc.

At runtime, the content will flow/wrap to fit the current window:

Also note that the text is automatically justified–both the left and right sides of the paragraph are lined up.

#251 – Embedding an UIElement Within a FlowDocument

You can embed any UIElement into a FlowDocument using the BlockUIContainer block type.  This allows inserting controls into the middle of a document.  Note that since Panel derives from UIElement, you can embed not just single controls, but containers that host other controls.

Here’s an example.

	<FlowDocument FontFamily="Cambria" FontSize="14">
		<Paragraph>"Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.
			— Dr. Seuss</Paragraph>
		<BlockUIContainer FontFamily="Arial" FontSize="12">
			<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
				<Button Content="Like it" Margin="10" Width="70" Height="25"/>
				<Button Content="Don't like it" Margin="10" Width="70" Height="25"/>
			</StackPanel>
		</BlockUIContainer>
		<Paragraph>We continue this document with some more lovely Dr. Seuss quotes..</Paragraph>
	</FlowDocument>

The document will look like this at runtime:

#250 – Including a Section Block in a FlowDocument

A Section is a type of Block that you can include in a FlowDocument.  A Section acts as a container for other blocks.  You can then set various properties on the block and have those properties apply to all elements within the block.

Here’s a short example:

	<FlowDocument FontFamily="Cambria" FontSize="14">
		<Paragraph>Act I - George and Martha return from a faculty party, but Martha soon informs George that she has invited over guests.</Paragraph>
		<Paragraph>Act II - The wives rejoin the men and Martha begins to describe her husband's only novel.</Paragraph>
		<Section Background="LightGreen" Margin="10" FontFamily="Arial" FontSize="12" FontStyle="Italic">
			<Paragraph>Novel is embarrassingly autobiographical.</Paragraph>
			<Paragraph>George speaks of Martha's hysterical pregnancy.</Paragraph>
		</Section>
	</FlowDocument>

#249 – Creating a Table in a FlowDocument

You can include a table in a FlowDocument as content by using the Table block.  You present your content by laying it out as rows and columns.

	<FlowDocument FontFamily="Cambria" FontSize="14">
		<Paragraph>Some Pixar films:</Paragraph>
		<Table>
			<Table.Columns>
				<TableColumn Width="50*"/>
				<TableColumn Width="15*"/>
				<TableColumn />
			</Table.Columns>

			<TableRowGroup Background="LightGray" FontWeight="Bold">
				<TableRow>
					<TableCell><Paragraph>Title</Paragraph></TableCell>
					<TableCell><Paragraph>Year</Paragraph></TableCell>
					<TableCell><Paragraph>Director</Paragraph></TableCell>
				</TableRow>
			</TableRowGroup>

			<TableRowGroup FontFamily="Verdana" FontSize="12">
				<TableRow>
					<TableCell><Paragraph>Toy Story</Paragraph></TableCell>
					<TableCell><Paragraph>1995</Paragraph></TableCell>
					<TableCell><Paragraph>John Lasseter</Paragraph></TableCell>
				</TableRow>
				<TableRow>
					<TableCell><Paragraph>Monster's, Inc.</Paragraph></TableCell>
					<TableCell><Paragraph>2001</Paragraph></TableCell>
					<TableCell><Paragraph>Pete Docter</Paragraph></TableCell>
				</TableRow>
				<TableRow>
					<TableCell><Paragraph>The Incredibles</Paragraph></TableCell>
					<TableCell><Paragraph>2004</Paragraph></TableCell>
					<TableCell><Paragraph>Brad Bird</Paragraph></TableCell>
				</TableRow>
			</TableRowGroup>
		</Table>
	</FlowDocument>

#248 – Creating a List in a FlowDocument

You can include lists of items in a FlowDocument using the List block.

	<FlowDocument FontFamily="Cambria" FontSize="14">
		<Paragraph>Some Pixar films:</Paragraph>
		<List>
			<ListItem>
				<Paragraph>Toy Story</Paragraph>
				<Paragraph FontStyle="Italic">I can have a 2nd paragraph.</Paragraph>
			</ListItem>
			<ListItem>
				<Paragraph>A Bug's Life</Paragraph>
				</ListItem>
			<ListItem>
				<Paragraph>Toy Story 2</Paragraph>
				</ListItem>
			<ListItem>
				<Paragraph>Monsters, Inc.</Paragraph>
			</ListItem>
		</List>
	</FlowDocument>

#247 – Types of Blocks that You Can Use in a FlowDocument

There are five different types of blocks that you can include in a FlowDocument.  A block can be one of the following:

  • Paragraph – A paragraph of text
  • List – A list of text items, typically displayed with a bullet character
  • Table – A table, with rows and columns
  • Section – A section of the document that can, in turn, contain other blocks
  • BlockUIContainer – A placeholder that allows inserting any UIElement into the document

 

#246 – Use FlowDocument Control to Host Entire Documents

The FlowDocument control provides richer functionality than Label and TextBlock for displaying text.

A FlowDocument contains a collection of blocks, each of which is a separate paragraph, list, section or table.  Below is a simple example.

		<FlowDocument FontFamily="Cambria" FontSize="16">
			<Paragraph FontFamily="Arial" FontSize="14">
				Excerpt from <Italic>White Fang</Italic>, by <Bold>Jack London</Bold>
			</Paragraph>

			<Paragraph>
				A second cry arose, piercing the silence with needle-like shrillness.  Both men located the sound.
				It was to the rear, somewhere in the snow expanse they had just traversed.  A third and answering
				cry arose, also to the rear and to the left of the second cry.
			</Paragraph>

			<Paragraph>
				“They’re after us, Bill,” said the man at the front.
			</Paragraph>

			<Paragraph>
				His voice sounded hoarse and unreal, and he had spoken with apparent effort.
			</Paragraph>
		</FlowDocument>

Note that the content in the document automatically flows to fit the available space.

#245 – Easily Inline Text Formatting Codes with TextBlock Control

You can specify a TextBlock control’s content by defining a series of Run elements.

You can also just specify the text by setting the child element of the TextBlock:

		<TextBlock>
			Henry V was here.
		</TextBlock>

Finally, you can include some formatting tags directly in the body of the text:

		<TextBlock Margin="10" Height="100" FontSize="14" Width="290" TextWrapping="Wrap">
			We <Bold>few</Bold>, we happy <Bold>few</Bold>, we band of <Underline>brothers</Underline>;
For he to-day that sheds his <Italic>blood</Italic> with me
Shall be my <Underline>brother</Underline>; be he ne'er so <Italic>vile</Italic>,
This day shall <Bold>gentle</Bold> his <Italic>condition</Italic>;"
		</TextBlock>

#244 – Use a TextBlock Element for Richer Formatting

The Label control allows setting font properties like size and weight, but the settings apply to all of the text in the label.  Also, it’s difficult to embed line breaks without introducing cryptic characters.

The TextBlock control allows formatting subsets of its textual content by adding a series of Run elements and formatting each one separately.

Here’s an example.  Here’s a Label control:

		<Label Background="DarkGray" Margin="10" Height="50" FontSize="14"
			Content="Lancaster / York Richard, Duke of York Henry VI Warwick Somerset" />


And here’s an example of a TextBlock control, showing the same content:

		<TextBlock Background="DarkGray" Margin="10" Height="100" FontSize="14">
			<Run Text="Lancaster" Foreground="Red" TextDecorations="Underline"/><Run Text=" / "/>
			<Run Text="York" Foreground="White" TextDecorations="Underline"/>
			<LineBreak/>
			<Run Text="Richard, Duke of York" Foreground="White" FontSize="16" FontWeight="Bold"/>
			<LineBreak/>
			<Run Text="Henry VI" Foreground="Red" FontSize="16" FontWeight="Bold"/>
			<LineBreak/>
			<Run Text="Warwick" Foreground="White" FontStyle="Italic"/>
			<LineBreak/>
			<Run Text="Somerset" Foreground="Red" FontStyle="Italic"/>
		</TextBlock>

#243 – Display Text Using a Label Control

We saw how to use the DrawText and DrawGlyphRun methods to draw text into a visual element at a very low-level.  A much easier way to display text in a user interface is to use the Label control.

Because Label inherits from UIElement, you can include it in XAML as child of a Panel control.

You set the text for the Label using its Content property.

Here are some examples of Label controls.

	<StackPanel Orientation="Vertical">
		<Label Content="Miss Barkley was quite tall."/>
		<Label Content="A man is never lost at sea." FontFamily="Verdana" FontSize="16" FontWeight="Bold"/>
		<Label Content="Listen, Robert, going to another country doesn't make any difference." Foreground="Blue" Background="Pink"/>
	</StackPanel>