WPF FlowDocumentPageViewer Control


The FlowDocumentPageViewer divides the entire document up into pages instead of just offering a scroll when the text gets longer than the available space. This allows you to navigate from page to page, giving a more book-like reading experience. When you make the window more narrow, it will transform to one page wide.

The FlowDocument class has a range of properties that will allow you to control how and when they are used. For more information have a look at this MSDN article, where several properties are used in a nice example: How to: Use FlowDocument Column-Separating Attributes.

The FlowDocumentPageReader has a search button by default, but this FlowDocumentPageViewer needs to have one set up manually before the user can search.

<Window x:Class="FlowDocumentPageViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FlowDocumentPageViewer"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="FlowDocumentPageViewer" Height="450" Width="800">
    <DockPanel Margin="6">
        <WrapPanel DockPanel.Dock="Top">
            <Button Margin="6" Name="btnSearch" Click="btnSearch_Click">Search</Button>
        </WrapPanel>
        <FlowDocumentPageViewer Name="fdViewer">
            <FlowDocument>
                <Paragraph Background="Azure">Azure. Two shades of green to emphasize the two paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus odio arcu, luctus vestibulum tortor congue in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec lacinia neque. Donec malesuada, ligula non vestibulum cursus, urna purus pellentesque orci, aliquet accumsan dui velit ac justo. Phasellus sagittis ligula in leo dapibus, vel vestibulum felis mattis. Fusce vitae auctor nibh. Ut sit amet fringilla turpis. Aenean tincidunt feugiat sapien, quis scelerisque enim pretium commodo. Mauris fermentum posuere nulla, vitae fermentum quam malesuada in. Cras ultrices bibendum nulla eu mollis.</Paragraph>
                <Paragraph Background="LightGreen">LightGreen. Nulla vitae suscipit tellus. Nunc sit amet tortor fermentum, sollicitudin enim cursus, sagittis lacus. Pellentesque tincidunt massa nisl, nec tempor nulla consequat a. Proin pharetra neque vel dolor congue, at condimentum arcu varius. Sed vel luctus enim. Curabitur eleifend dui et arcu faucibus, sit amet vulputate libero suscipit. Vestibulum ultrices nisi id metus ultrices, eu ultricies ligula rutrum. Phasellus rhoncus aliquam pretium. Quisque in nunc erat. Etiam mollis turpis cursus, sagittis felis vel, dignissim risus. Ut at est nec tellus lobortis venenatis. Fusce elit mi, gravida sed tortor at, faucibus interdum felis.</Paragraph>
            </FlowDocument>
        </FlowDocumentPageViewer>
    </DockPanel>
</Window>

You just need to call the Find() method.

using System.Windows;

namespace FlowDocumentPageViewer
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            fdViewer.Find();
        }
    }
}

You can some properties, like the ones below, to change how the columns look and how they are rendered.

<FlowDocument 
    ColumnGap="20.0" 
    ColumnRuleBrush="DodgerBlue" 
    ColumnRuleWidth="5.0" 
    ColumnWidth="140.0">