WPF FlowDocumentScrollViewer Control


The FlowDocumentScrollViewer is simple. It simply allows the users to scroll through long documents, using regular scrollbars. Below is a screenshot of a simple program that contains in the XAML: Grid, FlowDocumentScrollViewer, FlowDocument, and Paragraph.

<Window x:Class="FlowDocumentScrollViewer.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:FlowDocumentScrollViewer"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="FlowDocumentScrollViewer" Height="270" Width="470">
    <Grid>
        <FlowDocumentScrollViewer IsToolBarVisible="True" Zoom="80" 
                                  ScrollViewer.VerticalScrollBarVisibility="Auto">
            <FlowDocument Background="Azure">
                <Paragraph FontSize="28" TextAlignment="Center">Hello, world!</Paragraph>
                <Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" 
                           Foreground="Gray">The standard programming greeting!</Paragraph>
                <Paragraph>In this interface we have a
                    <Run FontWeight="Bold">Grid.</Run> Inside the Grid there is the
                    <Run FontWeight="Bold">ScrollDocumentViewer</Run> that has inside that a
                    <Run FontWeight="Bold">FlowDocument.</Run> Now we have some content in
                the form of three paragraphs.</Paragraph>
            </FlowDocument>
        </FlowDocumentScrollViewer>
    </Grid>
</Window>

Zooming

All of the FlowDocument wrappers support zooming out of the box. With the example above, you can simply hold down the Ctrl key while using the mouse wheel to zoom in and out. This might not be obvious to your end users though, so you can help them by displaying the built-in toolbar of the FlowDocumentScrollViewer, which has controls that will allow you to change the zoom level. Just set the IsToolBarVisible property to true on the FlowDocumentScrollViewer.

<FlowDocumentScrollViewer IsToolBarVisible="True" Zoom="80" 
                          ScrollViewer.VerticalScrollBarVisibility="Auto">

By altering the code from the line above we get the following, after the user has increased the zoom.

Text alignment

By default, text is rendered justified. This is why you will probably always want to include the property TextAlignment. This can be changed, either on a single paragraph or globally for the entire document by setting the same property on the FlowDocument element. With justified, Microsoft provided two more properties to help with layout. IsOptimalParagraphEnabled allows WPF to look ahead in your text, to see if it would make more sense to break the text in a different position than right at the moment where it runs out of space. IsHyphenationEnabled allows WPF to split your words with a hyphen, if it would allow for a more natural layout of the text.

Global Style

If you have a lot of FlowDocument instances in your application and you prefer this optimal rendering method, you can enable it on all of your FlowDocument instances by specifying a global style that enables it, in your App.xaml.

    <Application.Resources>
        <Style TargetType="FlowDocument">
            <Setter Property="IsOptimalParagraphEnabled" Value="True" />
            <Setter Property="IsHyphenationEnabled" Value="True" />
        </Style>
    </Application.Resources>