在过去十年中,我们看到了应用程序开发模型形成了两个分支 — 传统的“智能客户端”安装应用程序和基于 Web 的应用程序,两者都为了在开发界内占据统治地位而展开竞争。这两个模型都要求开发人员牺牲在另一个模型中被视为理所当然的功能。Web 应用程序提供了更大的作用范围、更简单的部署和简易性,以弥补状态的丢失、更为复杂的开发模型以及集成度较低的平台体验(尽管最近重新发现了诸如 AJAX 这样的技术)等缺点。另一方面,Windows 领域使人们开发的应用程序有希望脱机工作并充分利用客户端硬件,但丧失了部署的简易性以及可用于 Web 应用程序的无数种标记工具支持。能够提供独立的、基于浏览器的应用程序、简易的部署、出色的工具支持和深度平台集成的客户端应用程序模型具有明显的作用。
自从在 Windows 的第一个版本中首次出现以来,构成 Windows 用户体验核心的图形子系统(USER32 和 GDI 库)实际上已经诞生了将近二十年。当然,随着时间的推移,USER32 和 GDI 经历了重大的演变和发展,并且在所有领域都引入了很多新的服务和功能。 同时,还出现了诸如 Direct3D 这样的新呈现技术,这些技术能够充分利用在最新的视频卡中公开的图形功能。但是,目前的大多数主流应用程序都没有提供这些图形卡实现的体验。
Windows Presentation Foundation
Windows Presentation Foundation(以前称为“Avalon”)是 Windows 中新的关键图形子系统,它为用户界面、2D 和 3D 图形、文档和媒体提供了统一的方法。它在 .NET Framework 基础上生成,并利用 Direct3D 进行基于向量的呈现,为生成所有种类的浸入式应用程序提供了强大的解决方案。另外,Windows Presentation Foundation 通过提供声明性编程模型来实现“工具性”和灵活性,从而使设计人员成为开发过程不可分割的组成部分。
表 1. Windows Presentation Foundation 服务 | |
基本服务 | XAML, Property System, Input & Eventing, Accessibility |
媒体服务 | 2D, 3D, Audio, Video, Text, Imaging, Animation, Effects, Composition Engine |
文档服务 | XPS Documents, Open Packaging Conventions |
用户界面服务 | Application Services, Deployment, Controls, Layout, Data Binding |
可按照如下方式对 Windows Presentation Foundation 背后的设计原则进行分类:
·继承:Windows Presentation Foundation 提供横跨表 1 中所标识服务的统一 API。如今的开发人员面临着无数种不同技术和 API 的选择,具体取决于他们是面向 2D 图形(GDI 或 GDI+)、用户界面(USER32 或 Windows 窗体)、媒体 (DirectShow) 还是 3D(Direct3D 或 OpenGL)。Windows Presentation Foundation 提供了一个与上述所有服务正交的单个模型,并允许将内容无缝地集成到单个应用程序。可使用相同的构造来实现动画、数据绑定和样式设置,而无需顾及是面向 2D、3D 还是文本内容。
·向量图形。正如引言所述,Windows Presentation Foundation 充分利用了作为现代 PC 系统的组成部分的强大的图形处理单元。本质上,组合引擎基于向量,允许对所有输出进行缩放以便与特定计算机的分辨率匹配。呈现体系结构使用 Direct3D 来完成所有输出:在使用硬件实现 DirectX 7 或更高版本的视频卡上,Windows Presentation Foundation 尽可能地使用 GPU 来呈现输出。在无法使用硬件呈现的情况下,可以退而求其次使用软件呈现。最后,浮点逻辑像素系统和 32 位 ARGB 颜色支持提供丰富的、预见到未来技术需要(如高 DPI 显示器)的高保真体验。
·声明性编程。Windows Presentation Foundation 引入 XAML(可扩展应用程序标记语言),这是一种基于 XML 的语言,用于实例化和填充嵌套对象层次结构。尽管 XAML 并非专门局限于 Windows Presentation Foundation,但它本质上是适合于诸如 UI 定义和构建这样的任务的。XAML 的设计使应用程序可在运行时分析和操纵动态工作流方案的 UI 逻辑。重要的是,Windows Presentation Foundation 中体现的 XAML/代码隐藏模型使设计人员和开发人员可使用诸如 Expression“Sparkle”这样的工具以及第三方专家工具(包括 ZAM 3D 和 Mobiform. Aurora),相互协作来完成客户端应用程序的设计和开发。
·简易的部署。通过对独立应用程序和 Web 浏览器应用程序的支持,Windows Presentation Foundation 提供两种部署模型中的最佳模型。Web 浏览器应用程序从 Internet Explorer 内部运行 — 占据整个窗口或在嵌入式框架中。它们提供 Web 应用程序所闻名的易于部署的特点,并且在部分信任的沙箱内操作(沙箱能够防止客户端计算机受到恶意应用程序的侵害)。然而,它们仍然可以利用本地客户端硬件,并使用 3D 和媒体服务获得目前可以得到的最丰富的 Web 体验。另一方面,独立应用程序通过 ClickOnce 或 MSI 技术在本地安装,并且提供对基础平台的完全访问。
·文档生存周期。Windows Presentation Foundation 引入一组新的文档和打印技术。需要将数据永久保存在本地存储区的应用程序可以使用 Open Packaging Conventions(开放打包约定)— 这是一种与 Office 12 共享的基于 ZIP 的打包约定,它支持核心属性和自定义元数据、数字签名以及权限管理功能。对于希望共享文档以便在多台计算机(即使未安装相应的应用程序)之间进行协作的应用程序而言,XML Paper Specification(XML 文件规范)允许以可打印、可移植的格式确立可视化效果。
图1 显示的体系结构关系图标识 Windows Presentation Foundation 的主要组件。(请注意,方框的大小不代表各个组件的相对大小或重要性。)
图 1. Windows Presentation Foundation 体系结构
在顶层,Presentation Framework 提供了一个托管 API,它提供对基础功能的完全访问。绝大多数 Windows Presentation Foundation 开发人员都将专门使用这一层。该框架包含大量标准控件(如 Button、Label、Menu);布局面板;2D 和 3D 图形和文本基元;对图像处理效果、媒体、动画和文档服务的支持;以及对与 GDI、DirectX 和 Windows 窗体/GDI+ 之间的互操作性的支持。
Windows Presentation Foundation 的真正主力是可视系统。Windows Presentation Foundation 中的大多数元素都派生自一个 Visual 基类。可视系统组合所有数据并产生屏幕输出。我们就是在这里将视频和音频、2D、3D 和动画集成在一起,并提供某些文本布局服务。位于该体系结构模型较低位置的是组合引擎,它负责在屏幕中呈现一个可视化树,并考虑从透明层到窗口区域无效的所有方面。
Windows Presentation Foundation 中的所有呈现操作均通过 Direct3D 完成(实际上,Windows Vista 硬件徽标程序需要 DirectX 9 的 GPU)。通过将更多的图形处理操作移动到 GPU 中,我们可以让 CPU 有能力完成其他工作,从而提高性能,同时改善图形的质量。然而,这些优点并不局限于 3D 领域 — 2D 图形也利用了相同的服务;Windows Presentation Foundation 内部未使用 GDI(除非与旧式元素集成)。对于安装有 Windows Vista 的计算机而言,新的显示驱动程序模型提供了优质的输出,从而使媒体密集型应用程序获得较高的性能。
布局:将元素放到屏幕上
布局是任何用户界面子系统的基础服务之一,它涉及如何确定元素在窗口中的位置。设计 Windows Presentation Foundation 布局系统的目的是为灵活的可扩展模型提供支持,该模型针对内容进行优化,并且能够正确地处理数据、样式和控件。
传统的应用程序平台(如 Win32)几乎没有布局的概念:控件放置在画布上的 (x,y) 坐标系中,并且开发人员需要手动提供对确定任何元素的原点和尺寸的支持(考虑窗口大小调整和显示器 DPI 设置)。另一方面,Windows Presentation Foundation 提供多种适合于内容并且在窗口内管理控件和项目位置的布局实现。
在 Windows Presentation Foundation 中,几乎可以使用任何元素作为其他元素的宿主。例如,Button 可按如下方式包含图像:
<Window > <Button Width=”260″ Height=”200″ > <Image Source=”C:WINDOWSWebWallpaperfollow.jpg” /> </Button> </Window> |
|
此外,Windows Presentation Foundation 提供五个布局面板,以便控制和约束子元素的大小和位置:Canvas、DockPanel、StackPanel Grid 和 WrapPanel。
布局面板
Canvas 使您可以进行 (x,y) 定位,这与 GDI 和 GDI+ 目前提供的功能类似。您还可以使用附加的属性来控制项的位置。例如:
<Border > <Canvas Background=”silver” Margin=”20″ LayoutTransform=”scale 2″> <Button Canvas.Top=”30″ Canvas.Left=”50″>Hello world!</Button> </Canvas> </Border> |
这里,Canvas.Top 和 Canvas.Left 是 Canvas 类中的属性,应用于 Button 以控制其位置。LayoutTransform. 属性(它是用来派生所有较高级别类的 FrameworkElement 类的一部分)按照 3.0x 幅度缩放输出。
DockPanel 使您在停靠项时无需担心它们的确切 (x,y) 位置:
<Border > <DockPanel Background=”silver” Margin=”20″ LayoutTransform=”scale 2″> <Menu DockPanel.Dock=”Top”> <MenuItem Header=”File” /> <MenuItem Header=”Edit” /> </Menu> <TreeView> <TreeViewItem Header=”root1″> <TreeViewItem Header=”child” /> </TreeViewItem> <TreeViewItem Header=”root2″> </TreeView> <ListBox> <ListBoxItem>listBoxItem1</ListBoxItem> <ListBoxItem>listBoxItem2</ListBoxItem> </ListBox> </DockPanel> </Border> |
StackPanel 提供一个从左至右或从上至下放置内容的堆栈模型。
<Border > <StackPanel rientation=”Horizontal” Background=”silver” Margin=”20″ LayoutTransform=”scale 2″> <Button Height=”30″ Margin=”5″>OK</Button> <Button Height=”30″>Cancel</Button> </StackPanel> </Border> |
Grid 提供一个允许进行行/ 格定位的模型:
<Border > <Grid Background=”silver” Margin=”20″ LayoutTransform=”scale 3″> <Button Width=”200″ Height=”60″ VerticalAlignment=”Bottom” HorizontalAlignment=”Right” Margin=”20″ >Hello</Button> </Grid> </Border> |
在 格中,可设置列和行定义,从而可以设置宽和高。可将上述项设置为绝对值(x 像素宽),或者在考虑绝对大小调整之后使用星 表示法来分配剩余的空间。还可以设置一个系数来确定分配该空间的方式。例如:
<Border > <Grid LayoutTransform=”scale 3″ ShowGridLines=”true”> <ColumnDefinition Width=”30″ /> <ColumnDefinition Width=”2*” /> <ColumnDefinition Width=”*” /> <RowDefinition /> <Button Grid.Column=”1″ Margin=”10″>Hello world!</Button> </Grid> </Border> |
可用 SharedSizeGroup 属性为多个对象指定共享的大小。例如,可使用该属性来指定两个按钮具有相同的宽度(即使它们通常具有不同的大小范围)。例如:
<Border > <Grid LayoutTransform=”scale 2″ ShowGridLines=”true” IsSharedSizeScope=”true” Height=”80″> <ColumnDefinition Width=”30″ /> <ColumnDefinition Width=”Auto” SharedSizeGroup=”Buttons” /> <ColumnDefinition Width=”Auto” SharedSizeGroup=”Buttons” /> <RowDefinition /> <Button Grid.Column=”1″ Margin=”10″>OK</Button> <Button Grid.Column=”2″ Margin=”10″>A very long cancel button</Button> </Grid> </Border> |
WrapPanel 模型是资源管理器窗口的右侧窗格,使您可以处理在当前行已满之后流入新行中的项。例如:
<Border LayoutTransform=”scale 2″> <WrapPanel Background=”Silver” Margin=”10″> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> <Button /> </WrapPanel> </Border> |
面板负责其子元素的布局。它们定义内容的大小和形状、对齐方式和边距。面板的子元素可以是诸如 TextBox 或 Button 这样的元素,也可以是另一个面板。例如,DockPanel 可以包含 StackPanel。
项调整大小以适应它们所包含的内容 — 这是一个重要的概念,因为它确保了应用程序的本地化不需要重新校准应用程序布局(因为不同语言的同一句子 — 例如“Auf Wiedersehen”与“Goodbye”— 具有不同的文本长度)。可用 HorizontalAlignment/VerticalAlignment 属性应用对齐方式,并且使用 Margin 属性指定边距。
ScrollViewer 提供子元素内容的滚动视图;如果内容溢出可用的空间,则会显示一个滚动条并允许用户在内容区域周围移动。例如:
<Border LayoutTransform=”scale 2″> <ScrollViewer> <TextBlock FontSize=”20″ TextWrapping=”Wrap” FontFamily=”Global User Interface”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce posuere volutpat erat. Praesent imperdiet nibh nec pede. Mauris quis orci. Maecenas luctus, risus tempus dapibus mollis, magna metus convallis nunc, eget pulvinar eros ipsum consectetuer dui. </TextBlock> </ScrollViewer> </Border> |
ViewBox 具有约束内容的大小以适应父面板的相反效果。这就提供了一种自动缩放效果。
<Border > <Viewbox> <TextBlock FontFamily=”Global User Interface”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </TextBlock> </Viewbox> </Border> |
布局协议是一个递归过程,它是某种形式的协商,目的是确保所有元素都基于其请求获得“公平”数量的空间。首先,将发生一个测量过程,其中,父元素询问子元素希望自己多大,而子元素用 DesiredSize 进行响应。然后,将发生排列过程,其中,父元素以 ActualSize 属性的形式告诉子元素它将有多大。在进行计算时,特殊值 Double.PositiveInfinity 意味着“适合于内容”。可通过重写面板的 MeasureOverride 和 ArrangeOverride 元素来处理这一问题。
相关资源:Ice-Cream—React-App-其它代码类资源-CSDN文库
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!