WPF教程

WPF: 使用Flow Document (流文档)html教程

时间:2013/6/20 1:16:10  作者:WPF之家  来源:http://www.wpf123.com  查看:110  评论:0
内容摘要:WPF面向的是UI展现,而文本显示无疑是UI层中的重要功能之一。WPF提供了XPS (XML 文件规范) 和Flow Document (流文档) 来在不同的场景下展现或者操作文档的显示。XPS(XML 文件规范)针对打印和面向页面的内容,而”流文档”则针...

WPF面向的是UI展现,而文本显示无疑是UI层中的重要功能之一。WPF提供了XPS (XML 文件规范) Flow Document (流文档) 来在不同的场景下展现或者操作文档的显示。XPSXML 文件规范)针对打印和面向页面的内容,而流文档则针对屏幕显示以及提供更动态和可以论证的更复杂模型。流文档几乎适用于与文本内容相关的所有方面,从产品说明到整本书籍

Flow DocumentWPF3.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的效果。这里仅仅显示了3Paragraph并以设置了简单的样式,但没有高级布局设置。Flow Document以默认的Page Viewer方式展示。WPF: 使用Flow Document (流文档)html教程

    

 

 

 

 

 

 

 

 

 

Figure 1: 普通声明的Flow DocumentPage 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将提供以翻页的方式来导航内容页。通过你调整窗口的大小,流文档会根据内容的位置、尺寸来调整流的布局(这就是你为什么会在变化窗口大小的时候看到多列的原因,流的布局变化)。

WPF: 使用Flow Document (流文档)html教程

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Figure 2 FlowDocumentPageViewer方式展现流文档

FlowDocumentPageViewer提供默认的分页导航和ZOOM功能,它提供的Find功能默认为隐藏,可以通过ApplicationCommands.Find命令或Ctrl + F来唤醒Find功能。

 

FlowDocumentScrollViewer

 

使用一个滚动条以连续的流显示文档,类似网页或 Microsoft Word 中的”Web 版式ScrollViewer模式仅仅是以连续的方式显示流文档的内容,所以其不具备PageViewer的可以自动变化流布局的高级功能。在调整窗口大小时,流文档无法以多页或多列的方式显示。

FlowDocuemntScrollViewerFlowDocumentPageViewer的用法一模一样,只需要将其关键字替换即可,如:

<FlowDocumentScrollViewer BorderThickness="1" BorderBrush="Blue" >

……

</FlowDocumentScrollViewer>

 

WPF: 使用Flow Document (流文档)html教程

Figure 3 FlowDocuemntScrollViewer方式展现流文档

文档展现视图默认不具有Find栏和ZOOM栏,通过Ctrl + F调用。

 

FlowDocumentReader

 

此控件组合了滚动查看器和页面查看器,让用户可以在两种方法之间切换。这是用于流文档的默认控件,而且对于以显示复杂文本为特色的应用程序通常是一个不错的选择。除了将标记用FlowDocumentReader替换前边的两个标记中任何一个,便可以轻松使用这种高级的展现。

<FlowDocumentReader BorderThickness="1" BorderBrush="Blue" >

……

</ FlowDocumentReader >

 

注意展现视图中出现了三个展现方式切换的按钮。FlowDocumentReader具有一个名为ViewMode的属性,可取的值为Page, TwoPageScroll,通过设置ViewMode可以在设定其初始展现方式。默认为Page,对应于FlowDocumentPageViewer

WPF: 使用Flow Document (流文档)html教程

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>

 

WPF: 使用Flow Document (流文档)html教程

Figure 5 通过FlowDocument的属性控制展现

 

Block嵌套

 

Flow DocumentBlock的集合所有Block都是从 System.Windows.Documents.BlockBlock又是从 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. Credit is tight. People are worried about their savings. So is it a great time to start a business? "Are you crazy?" might be the quick answer.

</Paragraph>

 

当然,Figure还有一个重要的用户就是设置标题。对于标题,你可以通过设置Width1Content或者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>

展示一下最终的结果吧。看起来很酷,不是吗?也很容易哦。

WPF: 使用Flow Document (流文档)html教程

Figure 6: 通过Figure标签来定制标题和图像

 

Float标记

 

Float标记类似于CSS中的Float属性,它定义了标签内的内容以浮动的方式显示。就像在CSS中的解释一样,它打破当前的流布局,以特定的方式来重新布局内容。HorizontalAlignment 属性和Width属性可以控制其展现方式。

<Paragraph>

The demand for energy efficiency and an environmentally friendly footprint is also spurring entrepreneurship. Energy auditors help businesses and homes save money by reducing energy costs.

<Floater HorizontalAlignment="Right" Style="{StaticResource FloatingContent}">

<Paragraph>Retirement Widget</Paragraph>

<Paragraph>Search on Google</Paragraph>

</Floater>

</Paragraph>

 

WPF: 使用Flow Document (流文档)html教程

Figure 7 Float标签以浮动方式重新布局

 

InlineUIContainerBlockUIContainer

 

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:添加一个换行标记。

WPF: 使用Flow Document (流文档)html教程

Figure 8: 在Flow Document中应用Table, ListItem和Floater.

Flow Document提供了一系列的默认导航、分页、搜索功能,并可以通过以类似HTML的方式展现内容。更为客观的是,由于支持内嵌WPF Control,我们可以提供更多的可控功能。

附加示例代码:下载


标签:WPF Flow Document  流文档 

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。本文出自“wpf之家”,请务必保留此出处:http://www.wpf123.com

相关评论
Copyright © 2009-2014 WPF之家(http://www.wpf123.com/) All rights reserved
 Powered by WPF之家
闽ICP备10004896号