#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:

Advertisement

#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