正文
WPF中使用流文档
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
转载自：http://www.cnblogs.com/zlgcool/archive/2008/11/17/1335456.html
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/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的用法一模一样，只需要将其关键字替换即可，如：
<FlowDocumentScrollViewerBorderThickness="1" BorderBrush="Blue" > …… </FlowDocumentScrollViewer> |
Figure 3： 以FlowDocuemntScrollViewer方式展现流文档
文档展现视图默认不具有Find栏和ZOOM栏，通过Ctrl + F调用。
FlowDocumentReader
此控件组合了滚动查看器和页面查看器，让用户可以在两种方法之间切换。这是用于流文档的默认控件，而且对于以显示复杂文本为特色的应用程序通常是一个不错的选择。除了将标记用FlowDocumentReader替换前边的两个标记中任何一个，便可以轻松使用这种高级的展现。
<FlowDocumentReaderBorderThickness="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> |
Figure 5： 通过FlowDocument的属性控制展现
Block嵌套
Flow Document是Block的集合，所有Block都是从 System.Windows.Documents.Block。Block又是从 ContentElement 派生而来，ContentElement 是 WPF 中专门为文档定义优化的一个相当低级别的类。这类似于用来定义 WPF 界面的控件--它们都从 UIElement 派生而来。两者的继承树在概念上很相似，但并不完全相同。这意味着 WPF 控件和块不能直接组合。例如Paragraph中不能直接包含对类似Button的定义，但它可以通过特殊 BlockUIContainer 块类包含任何 WPF 控件。这意味着，流文档可以包含所有类型的 WPF 元素（包括交互式用户界面、媒体和三维元素），而从另一个角度看，流文档也可是任何 WPF 用户界面的一部分，例如可以是控件内容的一个高级布局元素，也可以是一个真正的元素。
展现图像Figure
Figure标记我们通常可以用来展现图像。可以根据设置HorizontalAnchor属性和VerticalAnchor属性的值，流布局会根据其空间布局而改变。这很有助于我们用各种不同的方式来展现图线及其文字的布局。你可以让文字环绕图像，也可以让文字像HTML中的Float一样，这显得很简单。下边的代码片段将图像显示在Content的中央：
<Paragraph> <Figure Width="120px" HorizontalAnchor="ContentCenter" VerticalAnchor="ContentCenter" BorderBrush="Gray" BorderThickness="1"> <BlockUIContainer> <Image Source="09.jpg" Height="120px" Width="100px" Margin="0" /> </BlockUIContainer> <Paragraph Foreground="Blue"> Figure - Model Car</Paragraph> </Figure> America's economic future is uncertain. Unemployment is up sharply. </Paragraph> |
当然，Figure还有一个重要的用户就是设置标题。对于标题，你可以通过设置Width为1Content或者nColumn等方式来表示其所在布局中的位置。以下代码片段设置了如何定义一个跨越整个文档所有列的标题：
<Paragraph> <Figure HorizontalAnchor="PageCenter" VerticalAnchor="ContentTop" Width="1Content" Background="Brown"> <Paragraph Foreground="White" FontSize="18"> <Bold>Best Small Businesses to Start</Bold> </Paragraph> <Paragraph> <Italic>Learn from the examples of entrepreneurs who’ve succeeded in these hot start-up areas</Italic> </Paragraph> <Paragraph Foreground="Blue"> By Matthew Bandyk </Paragraph> <Paragraph Foreground="Blue"> Posted November 13, 2008 </Paragraph> </Figure> </Paragraph> |
展示一下最终的结果吧。看起来很酷，不是吗？也很容易哦。
Figure 6: 通过Figure标签来定制标题和图像
Float标记
Float标记类似于CSS中的Float属性，它定义了标签内的内容以浮动的方式显示。就像在CSS中的解释一样，它打破当前的流布局，以特定的方式来重新布局内容。HorizontalAlignment 属性和Width属性可以控制其展现方式。
<Paragraph> The demand for energy efficiency and an environmentally friendly <Floater HorizontalAlignment="Right" Style="{StaticResource FloatingContent}"> <Paragraph>Retirement Widget</Paragraph> <Paragraph>Search on Google</Paragraph> </Floater> </Paragraph> |
Figure 7： Float标签以浮动方式重新布局
InlineUIContainer和BlockUIContainer
InlineUIContainer 和 BlockUIContainer 提供了可以在Flow Document中插入WPF控件的能力。InlineUIContainer 可以被声明在像Paragraph等支持inline元素的对象中来Host任意的WPF控件，而BlockUIContainer可以被声明在像Section等支持block元素的对象中。他们都可以host任意的WPF控件。
<Section> <Paragraph> This contains some text and <InlineUIContainer> <Button>Button Control</Button> </InlineUIContainer> interspersed. </Paragraph> <Section> <BlockUIContainer> <Button>Host In Block Control</Button> </BlockUIContainer> </Section> </Section> |
其他标记
类似于Html中我们经常也会用到以下几中元素：
· Table元素 ： 允许内容以表格的方式展现。
<Table BorderBrush="Black" BorderThickness="1"> <Table.Columns> <TableColumn Width="*"></TableColumn> <TableColumn Width="2*"></TableColumn> </Table.Columns> <TableRowGroup> <TableRow> <TableCell> <Paragraph>Type tile here</Paragraph> </TableCell> <TableCell> <Paragraph>Row Content Display Area</Paragraph> </TableCell> </TableRow> <TableRow> <TableCell> <Paragraph>Type tile here</Paragraph> </TableCell> <TableCell> <Paragraph>Row Content Display Area</Paragraph> </TableCell> </TableRow> </TableRowGroup> </Table> |
· ListItem元素：以列表的方式展现内容。通过MarkStyle可以改变其列表风格。
<List MarkerStyle="Decimal"> <ListItem> <Paragraph>this area shows as list item</Paragraph> </ListItem> <ListItem> <Paragraph>this area shows as list item</Paragraph> </ListItem> <ListItem> <Paragraph>this area shows as list item</Paragraph> </ListItem> <ListItem> <Paragraph>this area shows as list item</Paragraph> </ListItem> </List> |
· LineBreak：添加一个换行标记。
Figure 8: 在Flow Document中应用Table, ListItem和Floater.
Flow Document提供了一系列的默认导航、分页、搜索功能，并可以通过以类似HTML的方式展现内容。更为客观的是，由于支持内嵌WPF Control，我们可以提供更多的可控功能。
附加示例代码：下载
