WPF：使⽤FlowDocument（流⽂档）
WPF⾯向的是UI展现，⽽⽂本显⽰⽆疑是UI层中的重要功能之⼀。WPF提供了XPS (XML ⽂件规范) 和Flow Document (流⽂档) 来在不同的场景下展现或者操作⽂档的显⽰。XPS（XML ⽂件规范）针对打印和⾯向页⾯的内容，⽽”流⽂档”则针对屏幕显⽰以及提供更动态和可以论证的更复杂模型。“流⽂档”⼏乎适⽤于与⽂本内容相关的所有⽅⾯，从产品说明到整本书籍。
Flow Document是WPF3.0中提供的⼀个⽤于显⽰的新功能，它给了开发⼈员另⼀种选择去显⽰内容。Flow Document通过类似HTML ⽂档的格式定义⽂本流，但其功能更强⼤，并可提供明显更先进的布局选项。它内置了很多的元素，例如，Figure, Paragraph, Section, Floater, Table, InlineUIContainer等可以通过不同的布局和元素控制其显⽰⽅式。并且，它⽀持对图像的⽀持，使其可以像在HTML中⼀样随意控制。再加上其默认⽀持的导航，显⽰模式，搜索，让其内容展现⽅式有了进⼀步的提⾼。
Flow Document
Flow Document定义了这个流⽂档的顶级显⽰模式，在其内部可以包含诸如Section, Paragraph等标签⽤来控制其层级显⽰模式。这就类似于HTML中的DIV,TABLE等区域控制标签⼀样⽤来组成⽂档的显⽰结构。定义⼀个流⽂档很简单，你可以通过声明⼀个Flow Document和其内部的显⽰结构即可，例如以下代码通过显⽰了如何来创建了简单的显⽰功能。
<Window x:Class="WpfFlowDocuments.Window2"
xmlns="schemas.microsoft/winfx/2006/xaml/presentation"
xmlns:x="schemas.microsoft/winfx/2006/xaml"
Title="Example Flow Document Content" Height="300" Width="600"
HorizontalAlignment="Stretch">
<Window.Resources>
<Style x:Key="TitleParagraph" TargetType="{x:Type Paragraph}">
<Setter Property="Paragraph.FontFamily" Value="Calibri" />
<Setter Property="Paragraph.FontSize" Value="14pt" />
<Setter Property="Paragraph.Background" Value="Brown" />
<Setter Property="Paragraph.Foreground" Value="White" />
<Setter Property="Paragraph.FontWeight" Value="Bold" />
<Setter Property="Paragraph.TextAlignment" Value="Left" />
</Style>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Paragraph.FontFamily" Value="Calibri" />
<Setter Property="Paragraph.FontSize" Value="10pt" />
<Setter Property="Paragraph.Foreground" Value="Black" />
</Style>
</Window.Resources>
<FlowDocument>
<Section>
<Paragraph Style="{StaticResource TitleParagraph}">
<Bold>Best Small Businesses to Start</Bold>
</Paragraph>
<Paragraph>
<Underline>Learn from the examples of entrepreneurs who’ve succeeded in
these hot start-up areas</Underline>
</Paragraph>
</Section>
<Section>
<Paragraph Background="LightYellow">
By Matthew Bandyk  Posted November 13, 2008
</Paragraph>
</Section>
</FlowDocument>
</Window>
下图显⽰了XAML的效果。这⾥仅仅显⽰了3个Paragraph并以设置了简单的样式，但没有⾼级布局设置。Flow Document以默认
的Page Viewer⽅式展⽰。
Figure 1: 普通声明的Flow Document以Page Viewer的⽅式展⽰
显⽰模式
Flow Document默认⽀持三种展现⽅式，这也对应了上图中右下⽅的三个按钮。默认的Flow Document会以FlowDocumentReader来⽣成。对于不同的展现⽅式，其包含的导航，搜索等都有所不同，甚⾄缺少某些功能。
FlowDocumentPageViewer：以单独的页⾯显⽰流⽂档
FlowDocumentScrollViewer：以连续的流显⽰⽂档，通过滚动条导航
FlowDocumentReader ：组合了滚动查看器和页⾯查看器，让⽤户可以在两种⽅法之间切换。这是⽤于流⽂档的默认选项。FlowDocumentPageViewer
此选项以单独的页⾯显⽰流⽂档，让页⾯翻转⽽⾮滚动。这与 Word 中的“阅读版式”类似。以下XAML⽚段声明了⽂章
以FlowDocumentPageViewer的⽅式显⽰。
<FlowDocumentPageViewer BorderThickness="1" BorderBrush="Blue" >
<FlowDocument>
<Section>
<Paragraph Style="{StaticResource TitleParagraph}">
<Bold>Best Small Businesses to Start</Bold>
</Paragraph>
<Paragraph>
<Underline>Learn from the examples of entrepreneurs who’ve succeeded in these hot start-
up areas</Underline>
</Paragraph>
</Section>
<Section>
<Paragraph Background="LightYellow">
By Matthew Bandyk  Posted November 13, 2008
</Paragraph>
</Section>
……
</Section>
</FlowDocument>
</FlowDocumentPageViewer>
FlowDocumentPageViewer将提供以翻页的⽅式来导航内容页。通过你调整窗⼝的⼤⼩，流⽂档会根据内容的位置、尺⼨来调整流的布局（这就是你为什么会在变化窗⼝⼤⼩的时候看到多列的原因，流的布局变化）。
Figure 2：以FlowDocumentPageViewer⽅式展现流⽂档
FlowDocumentPageViewer提供默认的分页导航和ZOOM功能，它提供的Find功能默认为隐藏，可以通
过ApplicationCommands.Find命令或Ctrl + F来唤醒Find功能。
FlowDocumentScrollViewer
使⽤⼀个滚动条以连续的流显⽰⽂档，类似⽹页或 Microsoft Word 中的”Web 版式”。ScrollViewer模式仅仅是以连续的⽅式显⽰流⽂档的内容，所以其不具备PageViewer的可以⾃动变化流布局的⾼级功能。在调整窗⼝⼤⼩时，流⽂档⽆法以多页或多列的⽅式显⽰。
FlowDocuemntScrollViewer与FlowDocumentPageViewer的⽤法⼀模⼀样，只需要将其关键字替换即可，如：
fontweight属性bold<FlowDocumentScrollViewer BorderThickness="1" BorderBrush="Blue" >
……
</FlowDocumentScrollViewer>
Figure 3：以FlowDocuemntScrollViewer⽅式展现流⽂档
⽂档展现视图默认不具有Find栏和ZOOM栏，通过Ctrl + F调⽤。
FlowDocumentReader
此控件组合了滚动查看器和页⾯查看器，让⽤户可以在两种⽅法之间切换。这是⽤于流⽂档的默认控件，⽽且对于以显⽰复杂⽂本为特⾊的应⽤程序通常是⼀个不错的选择。除了将标记⽤FlowDocument
Reader替换前边的两个标记中任何⼀个，便可以轻松使⽤这种⾼级的展现。
<FlowDocumentReader BorderThickness="1" BorderBrush="Blue" >
……
</ FlowDocumentReader >
注意展现视图中出现了三个展现⽅式切换的按钮。FlowDocumentReader具有⼀个名为ViewMode的属性，可取的值为Page, TwoPage和Scroll，通过设置ViewMode可以在设定其初始展现⽅式。默认为Page，对应于FlowDocumentPageViewer。
Figure 4：以FlowDocuemnReader⽅式展现流⽂档
FlowDocumentReader 控件采取多列的⽅法呈现⽂本。这是另⼀项⾮常重要的可读性功能，因为⼈们不喜欢读跨越整个宽屏显⽰页⾯宽度的⼀⾏⾏⽂字。实际列宽因各种因素会有所不同，例如⽤于内容显⽰的可⽤总宽度、缩放系数和定义的列宽等。流⽂档的默认列宽为字体⼤⼩的 20 倍，默认字体⼤⼩约为300 个与设备⽆关的像素（3 1/8 英⼨的精确尺⼨显⽰）。所以在你调整窗⼝⼤⼩时，⼀旦窗⼝宽度可以
容纳两个默认列宽，流布局会⾃动更改为2列显⽰。但是你可以通过设置ColumnWidth属性来设置你⾃⼰的列宽度。
<FlowDocumentReader BorderThickness="1" BorderBrush="Blue">
<!--<FlowDocumentScrollViewer BorderThickness="1" BorderBrush="Blue">-->
<!--<FlowDocumentPageViewer BorderThickness="1" BorderBrush="Blue" >-->
<FlowDocument ColumnWidth="500"><!-- IsColumnWidthFlexible="False">-->
<Section>
<Paragraph Style="{StaticResource TitleParagraph}">
<Bold>Best Small Businesses to Start</Bold>
</Paragraph>
<Paragraph>
<Underline>Learn from the examples of entrepreneurs who’ve succeeded in these hot start-
up areas</Underline>
</Paragraph>
</Section>
…….
</FlowDocument>
</FlowDocumentPageViewer>
默认情况下IsColumnWidthFlexible属性是为true的，这表明在允许范围内（像当前FlowDocument的整体宽度⼤于ColumnWidth或默认ColumnWidth宽度的整数倍时），将会增⼤ColumnWidth，这样会让整个布局会更规律和整齐。但你也可以通过设置它为False来强制列宽必须为你指定的宽度，这样在其余的宽度将会保持空⽩。
通过设置ColumnGap等参数还可以来调整各个列之间的样式。以下代码⽚段设置了各个列之间的缝隙宽度（ColumnGap）和线条样式。<FlowDocument ColumnRuleBrush="Gray" ColumnRuleWidth="5" ColumnGap="30">
<Section>
<Paragraph Style="{StaticResource TitleParagraph}">
<Bold>Best Small Businesses to Start</Bold>
</Paragraph>
<Paragraph>
<Underline>Learn from the examples of entrepreneurs who’ve succeeded in these hot start-
up areas</Underline>
</Paragraph>
</Section>
………
</FlowDocument>
</FlowDocumentPageViewer>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。