majiayu000 WPF FlowDocument Patterns
Creating rich, paginated documents with flowing text content.
Advanced Patterns: See ADVANCED.md for programmatic creation, printing, and file I/O.
1. FlowDocument Overview
FlowDocument
├── Block Elements (Paragraph, Section, List, Table, BlockUIContainer)
│ └── Inline Elements (Run, Bold, Italic, Hyperlink, InlineUIContainer)
├── Viewers
│ ├── FlowDocumentScrollViewer (continuous scroll)
│ ├── FlowDocumentPageViewer (page by page)
│ └── FlowDocumentReader (multiple viewing modes)
└── Features
├── Automatic pagination
├── Column layout
├── Figure/Floater positioning
└── Print support
2. Basic FlowDocument
2.1 Simple Document
<FlowDocumentScrollViewer>
<FlowDocument FontFamily="Segoe UI" FontSize="14">
<Paragraph FontSize="24" FontWeight="Bold">
Document Title
</Paragraph>
<Paragraph>
This is a paragraph with <Bold>bold</Bold>,
<Italic>italic</Italic>, and
<Underline>underlined</Underline> text.
</Paragraph>
<Paragraph TextAlignment="Justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
2.2 Document Properties
<FlowDocument
FontFamily="Georgia"
FontSize="14"
PageWidth="800"
PageHeight="1100"
PagePadding="50"
ColumnWidth="350"
ColumnGap="20"
IsColumnWidthFlexible="True"
IsOptimalParagraphEnabled="True"
IsHyphenationEnabled="True">
<!-- Content -->
</FlowDocument>
3. Block Elements
3.1 Paragraph
<Paragraph TextAlignment="Left"
TextIndent="20"
LineHeight="24"
Margin="0,10,0,10">
Regular paragraph text with indentation.
</Paragraph>
<Paragraph Background="#F0F0F0" Padding="10">
Highlighted paragraph with background.
</Paragraph>
3.2 Section (Grouping)
<Section FontSize="12" Foreground="DarkGray">
<Paragraph>First paragraph in section.</Paragraph>
<Paragraph>Second paragraph in section.</Paragraph>
<Paragraph>All paragraphs inherit section styling.</Paragraph>
</Section>
3.3 List
<!-- Bulleted list -->
<List MarkerStyle="Disc">
<ListItem>
<Paragraph>First item</Paragraph>
</ListItem>
<ListItem>
<Paragraph>Second item</Paragraph>
<List MarkerStyle="Circle">
<ListItem><Paragraph>Nested item 1</Paragraph></ListItem>
<ListItem><Paragraph>Nested item 2</Paragraph></ListItem>
</List>
</ListItem>
</List>
<!-- Numbered list -->
<List MarkerStyle="Decimal" StartIndex="1">
<ListItem><Paragraph>Step one</Paragraph></ListItem>
<ListItem><Paragraph>Step two</Paragraph></ListItem>
</List>
MarkerStyle Options: None, Disc, Circle, Square, Box, LowerRoman, UpperRoman, LowerLatin, UpperLatin, Decimal
3.4 Table
<Table CellSpacing="0">
<Table.Columns>
<TableColumn Width="100"/>
<TableColumn Width="200"/>
<TableColumn Width="100"/>
</Table.Columns>
<!-- Header row -->
<TableRowGroup Background="#E0E0E0">
<TableRow>
<TableCell><Paragraph FontWeight="Bold">Name</Paragraph></TableCell>
<TableCell><Paragraph FontWeight="Bold">Description</Paragraph></TableCell>
<TableCell><Paragraph FontWeight="Bold">Price</Paragraph></TableCell>
</TableRow>
</TableRowGroup>
<!-- Data rows -->
<TableRowGroup>
<TableRow>
<TableCell><Paragraph>Item 1</Paragraph></TableCell>
<TableCell><Paragraph>Description of item 1</Paragraph></TableCell>
<TableCell><Paragraph>$10.00</Paragraph></TableCell>
</TableRow>
</TableRowGroup>
</Table>
3.5 BlockUIContainer (Embedding UI)
<BlockUIContainer>
<Image Source="/Images/diagram.png" Width="400" Stretch="Uniform"/>
</BlockUIContainer>
<BlockUIContainer>
<Button Content="Click Me" Width="100" Height="30"/>
</BlockUIContainer>
4. Inline Elements
4.1 Text Formatting
<Paragraph>
<Run>Normal text</Run>
<Bold>Bold text</Bold>
<Italic>Italic text</Italic>
<Underline>Underlined text</Underline>
<Run FontFamily="Consolas" Background="#F0F0F0">Code text</Run>
<Run Foreground="Red">Colored text</Run>
<Span BaselineAlignment="Superscript" FontSize="10">superscript</Span>
</Paragraph>
4.2 Hyperlink
<Paragraph>
Visit <Hyperlink NavigateUri="https://example.com"
RequestNavigate="Hyperlink_RequestNavigate">
Example.com
</Hyperlink> for more info.
</Paragraph>
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
System.Diagnostics.Process.Start(new ProcessStartInfo
{
FileName = e.Uri.AbsoluteUri,
UseShellExecute = true
});
e.Handled = true;
}
4.3 InlineUIContainer
<Paragraph>
Status:
<InlineUIContainer>
<Ellipse Width="12" Height="12" Fill="Green"/>
</InlineUIContainer>
Online
</Paragraph>
5. Figures and Floaters
5.1 Figure (Positioned Content)
<Paragraph>
<Figure HorizontalAnchor="PageRight"
VerticalAnchor="PageTop"
Width="200"
Padding="10"
BorderBrush="Gray"
BorderThickness="1">
<Paragraph FontStyle="Italic">
This figure appears at the top-right of the page.
</Paragraph>
</Figure>
Main document text continues here...
</Paragraph>
HorizontalAnchor: ContentLeft, ContentCenter, ContentRight, PageLeft, PageCenter, PageRight
VerticalAnchor: PageTop, PageCenter, PageBottom, ContentTop, ContentCenter, ContentBottom
5.2 Floater (Floating Content)
<Paragraph>
<Floater HorizontalAlignment="Right" Width="150">
<Paragraph Background="#F0F8FF" Padding="10">
This floater appears inline and text wraps around it.
</Paragraph>
</Floater>
Main paragraph text that wraps around the floater content...
</Paragraph>
6. Document Viewers
6.1 FlowDocumentScrollViewer
<!-- Continuous scroll, single page -->
<FlowDocumentScrollViewer VerticalScrollBarVisibility="Auto" IsToolBarVisible="True">
<FlowDocument><!-- Content --></FlowDocument>
</FlowDocumentScrollViewer>
6.2 FlowDocumentPageViewer
<!-- Page by page viewing -->
<FlowDocumentPageViewer>
<FlowDocument><!-- Content --></FlowDocument>
</FlowDocumentPageViewer>
6.3 FlowDocumentReader
<!-- Multiple viewing modes (Page, TwoPage, Scroll) -->
<FlowDocumentReader ViewingMode="TwoPage" IsFindEnabled="True" IsPrintEnabled="True">
<FlowDocument><!-- Content --></FlowDocument>
</FlowDocumentReader>