Expression Blend & WPF 快速概览

以下是我博客中关于 Expression Blend 的纯粹概述。这并非深入的教程，但您可以从中快速了解 Expression Blend。如需更多更新，您可以访问我的博客 此处 或 此处。

1. WPF 框架概述

下面是 MSDN 帮助中的 WPF 框架图。

图中红色框标记的部分是 WPF 的基础。

Windows Presentation Foundation 由三个 DLL 组成，分别是 WindowsBase (WindowsBase.dll)、PresentationCore (PresentationCore.dll) 和 PresentationFoundation (PresentationFoundation.dll)。我们先来讨论上面的那个框。

从底部算起，第一个 WPF 组件是 milcore。MIL 是 Media Integration Layer 的缩写。MIL 是 DirectX 和 CLR（以及上面的层）之间的接口。MILCORE 是一个非托管组件，它借助 DirectX 来处理 2D、3D 动画以及其他（我忘了是哪个）功能。性能和硬件加速（DX 的优势）是 MILCORE 为何是非托管组件的关键原因。WPF，也称为 Avalon，使用 MILCORE 进行渲染。MILCORE 也被称为组合引擎。

WindowsBase 定义了您将在 WPF 中使用的大多数基类型。对于 WPF 应用程序，必须包含 WindowsBase 程序集。

第二个组件是 PresentationCore (PresentationCore.dll)。这个 DLL 不包含任何 UI 组件，但它包含了可用于实现 UI 组件（Window 类除外）的基类型。

第三个也是最后一个是 PresentationFoundation，它包含了所有 WPF 控件和其他有用的 WPF 功能。

2. WPF 中的重要类

以下类是 WPF 的主要基础。让我们逐一来看。

System.Threading.DispatcherObject

WPF 中的几乎每个类都直接或间接继承自 DispatcherObject 。此类用于处理**并发和线程**。它还负责事件管理。如果您了解 Win32，那么您应该知道消息泵。dispacherobject 在这里执行相同的工作。在 WPF 的设计阶段，目标是迁移到单一线程执行（STA），但采用非线程“亲和性”模型（亲和性：原子之间相互吸引并结合成分子）。STA 的原因是为了互操作性。这里我们不深入探讨细节。其次，给定您有具有 STA 线程的对象，您需要一种在线程之间进行通信并验证您是否在正确线程上的方法。这就是 dispatcher 的作用所在。

System.Windows.DependencyObject

构建 WPF 的主要架构理念之一是偏好属性而非方法或事件。WPF 引入了一种名为依赖项属性的新属性类型，该属性在整个平台中用于实现样式、自动数据绑定、动画等。例如，如果有一个 window 对象，并且您正在为 window 对象应用某些样式，则需要将相同的样式应用于所有子对象。在这种情况下，在普通应用程序中，您需要实现方法来将所有子对象的属性设置为所需值。但借助上面的 DependancyObject，这可以几乎减少到 0。您可以设置属性的依赖项和通知。有关 DependencyObject 和 Properties 的更多信息，请参阅 本文。此外，还有用于类似目的的附加属性。

System.Windows.Media.Visual

定义系统后，下一步是在屏幕上绘制像素。此类 Visual 是这两个子系统（托管 API 和非托管 milcore）之间的连接点。

System.Windows.UIElement

UIElement 定义了核心子系统，包括 Layout、Input 和 Events。

System.Windows.FrameworkElement

FrameworkElement 提供的核心功能与应用程序布局相关。FrameworkElement 建立在 UIElement （请参阅上一节）引入的布局之上，并使布局作者更容易拥有一致的布局语义集。有效地，它允许程序员或设计者通过为控件指定对齐和布局属性来覆盖 UIElement 引入的自动布局功能。这些然后会在后台使用 FrameworkElement。FrameworkElement 为 WPF 平台引入的两个关键元素是数据绑定和样式。相当难吧！！！

3. XAML 概述

学习 WPF 的第一步是了解框架和类。您可以在我之前的 WPF 博文系列中找到相关内容。在了解了概述之后，接下来的事情就是学习 XAML。以下是一些关于 XAML 的笔记。

什么是 XAML？

Extensible Application Markup Language (XAML) 是一种用于声明式应用程序编程的标记语言。这意味着您可以使用 XAML 完成 WPF 的大部分工作。Windows Presentation Foundation (WPF) 实现了一个 XAML 加载器，并为 Windows Presentation Foundation (WPF) 类型提供了 XAML 语言支持。所以您可以说，XAML 是扩展应用程序开发可能性的 XML。它不是 WPF 的组件。

XAML 是一种基于 XML 的标记语言，用于描述 UI 元素、数据绑定、事件和其他功能。WPF、WWF 和 WPF/E（WPF 跨平台）使用 XAML。

对于创建或编辑 XML，市场上有很多工具可用，例如 XAMLPad（随 SDK 提供）、Expression Blend 等。Microsoft 提供 Blend 来轻松创建 WPF 或 SilverLight 的 XAML。

要开始使用 XAML，请下载 Blend September Preview。这是一个付费产品。如果您不拥有该产品，可以使用其他基于 XAML 的工具来学习 WPF 和 Silverlight 的 XAML。

下载 Blend：Blend September Preview
从以下开始：教程/视频，否则请阅读我的下一节。

4. 开始使用 Blend

我希望您已下载 Microsoft Expression Blend。我们已经讨论过 Blend 是一个通过几次点击即可创建 XAML 的工具。其图形和动画支持非常出色。在某种程度上，它类似于 Flash。正如我之前的建议，在开始 WPF 之前，先从 Expression Blend 概述入手，然后再转向 WPF。

首次打开 Expression Blend 时，您将看到以下屏幕。与 Flash 类似，有不同的区域。这些是工具箱、菜单、窗口列表、交互框、项目属性和资源面板。

打开 Blend 时，会显示欢迎屏幕。如果未显示，请转到“帮助”菜单并单击“欢迎屏幕”。在“帮助”选项卡中选择“用户指南”。在“用户指南”中，阅读以下部分。

工作区、管理项目和处理对象。这些点非常容易理解，如果您是常规的 .NET 程序员并且进行一些设计工作，您可以在大约 2 小时内轻松掌握。

依我之见，用户指南中重要的部分如下：

• 为什么选择 Expression Blend
• 键盘快捷键
• 工作区区域
• 调整工作区
• 处理对象部分

学会这些之后，从下一节开始学习绘制。

5. 在 Expression Blend 中绘图

希望您已参考我 上一篇博文 并阅读了 Microsoft Expression Blend 用户指南中提到的主题。

现在，下一个要讨论的主题是绘图。请保持用户指南打开，以便我们可以轻松参考。在 WPF 中，所有绘制的对象都是矢量图。矢量图意味着您放置的对象是使用不同的点、线、曲面而不是像素生成的。这意味着当您缩放对象时，它不会丢失控件/形状的清晰度。

同样，这将是分辨率无关的。将图形从栅格转换为矢量的优点是您不需要为不同的分辨率实现任何特殊的东西。您可以为不同类型的绘图使用不同的工具。

形状和路径

在绘制矢量图时，需要牢记两件事。我们可以选择形状或路径。椭圆、矩形等是形状，而路径具有定义的点。路径可以使用笔或铅笔绘制，您可以编辑和移动路径内的点。总有一个选项可以将形状转换为路径。

组合路径/形状

您可以使用不同的选项组合不同的路径或形状。将两个圆并排放置在画板上，使其重叠并用颜色填充圆。现在从“对象”菜单 > “组合” > （有不同的选项）中选择一个不同的选项。

您可以尝试每一个，看看它如何影响形状。否则，请查看用户指南（绘图部分）。

复合路径/形状

当您组合路径/形状时，形状的交集将被减去， resulting path 将是剩余的部分。您可以放置两个形状，然后尝试从“对象”菜单 > “路径” > “复合路径”中选择“复合路径”。如果该选项不可用，只需将形状转换为路径然后再试。

画笔部分下的不透明度蒙版

当您更改不透明度蒙版时，图像/形状/路径将被转换为不透明形状。在这里，您正在更改 Alpha 分量，它用于透明度。在下图中的方形上设置了 50% 的透明度。您可以看到它变得像绿色玻璃一样透明。

这里，我只向您展示了绘图部分的一个概述。您现在可以从用户指南中完成它。然后继续下一节。

6. Blend 中的外观

希望您喜欢之前的所有五个部分。

如果您直接跳到本节，请先阅读前面的章节。现在，打开 Expression Blend 附带的用户指南，然后转到“外观”部分。

我们已经学习了绘图部分，即如何绘制和处理不同的形状和路径。在本文中，我们将处理外观，即形状和控件的外观。有不同的属性可以设置外观。以下是属性列表：

填充和描边：分别用于形状/路径，用于填充形状或更改其边框。

背景、前景和边框画笔：类似于填充和描边，但用于控件。

不透明度和可见性：用于使控件/形状/路径透明。您可以从“属性”部分更改值。以下是图像。

使用类似的窗口编辑形状属性。以下是画笔的不同选项。它们是无画笔、纯色画笔、渐变画笔、平铺画笔。我们也可以使用图像画笔和图案画笔。画笔用于设置上述所有属性。

颜色/图案/画笔复制，您可以使用吸管和油漆桶。您可以从 Microsoft Blend 中尝试。

渐变：渐变画笔可以应用于任何控件/形状。有线性渐变画笔和径向渐变画笔。您可以创建一个形状并使用底部的两种渐变（显示在渐变画笔部分的底部）。此外，要设置渐变，您可以使用

位图效果：您可以使用不同的位图效果使对象更具吸引力。您可以为此使用“无”、“模糊”、“发光”等选项。请放置一个形状，赋予渐变色，然后尝试其中的所有选项。

7. 使用 Blend 处理文本

希望您喜欢 Blend 的教程系列。如果需要任何改进，请告诉我。

下一节涵盖 WPF 的文本部分。到目前为止，我们已经了解了如何处理对象（形状/路径）、绘制形状/路径以及为形状/路径和控件设置外观。

现在，本节的议程是展示如何处理文本控件。我们需要知道的第一件事是 Expression Blend/WPF 提供了哪些控件。

您应该都熟悉 TextBox、RichTextBox、PasswordBox 和 Label。TextBlock 类似于 Label。它向用户提供只读的 textblock 。TextBlock 和 Label 之间的唯一区别是 Label 可以提供助记键支持。FlowDocumentScroll Viewer 提供了一个具有 scrollbar 支持的区域。您可以以与形状/路径相同的方式编辑外观。

格式化文本：有多种格式化文本的方法。以下是用于此的图标。您在处理 Microsoft Office 时可能已经使用了几乎所有功能。

所有文本格式化功能，如字体、大小、粗体、斜体、下划线、段落、缩进、边距、项目符号或编号列表都可用。它非常简单且非常有用。

8. 使用 Blend 进行布局

在用户指南中，我跳过了 3D 和媒体部分，因为它们在当前级别不是很有用。现在，我们转向 Expression Blend 的 Layout 部分。

Layout 用于在窗体上布置不同的控件。在 WPF 中，它们被称为 Panels 和 Containers。以下是 WPF 中用作 layout 控件的 panels 和 containers：

• Grid 包含布局的行和列。您可以在网格布局中创建行和列，并使用它们来布置不同的控件，这些控件会与行或列对齐。
• Canvas 控件类似于旧的 Windows Forms 控件。位于画布上的所有控件都有相对的 X 和 Y 位置。它用于在窗体/页面中固定位置。
• 在 Dock 面板中，控件始终停靠在属性中定义的边缘。
• Stack 面板将控件排列在一条线上。控件的中心点与堆栈面板属性中定义的水平或垂直方向对齐。
• Wrap 面板类似于 HTML 页面。它从左到右排列子控件。

当您将控件/形状/路径放入 panels 时，它们会显示为绘制的 layers。它们按 Z-Layer 编号。您可以在控件上右键单击使用“置于顶层”、“上移一层”、“置于底层”等功能来按您希望的方式布置控件。

历史

• 2007 年 10 月 18 日：初始发布