WPF FlowDocument Patterns

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>

---

7. References

• FlowDocument Overview - Microsoft Docs
• Flow Content Elements - Microsoft Docs
• Documents in WPF - Microsoft Docs