外观概述

更改对象的可视外观是 Microsoft Expression Blend 中的基本任务。通过使用“属性”面板中的“外观”和“画笔”下的属性,可以更改选定对象的笔划颜色、填充颜色、不透明度和可见性。根据在 Expression Blend 项目中选择的对象类型,“外观”和“画笔”类别中的属性会动态调整对象的内容,以反映相应的可视属性。

常见外观属性

对象外观的很多更改都与向特定属性应用画笔相关。下表说明了这些属性。

属性

描述

Fill

设置应用于形状或路径内部的画笔。

Stroke

设置应用于形状或路径轮廓(边框)的画笔。

Background

设置应用于对象背景的画笔。此属性通常应用于显示文本的控件(如“Button”或“TextBlock”控件)的背景。

Foreground

设置应用于对象前景的画笔。此属性通常应用于控件(如“Button”或“TextBlock”控件)中显示的文本。

BorderBrush

设置应用于特定控件的边框的画笔。

Opacity

设置整个对象的不透明度。

Visibility

决定对象在运行时是可见还是隐藏。子对象也会受到父元素可见性的影响。

OpacityMask

设置画笔,以忽略其颜色,但将不透明度传递给应用蒙板的对象。在不透明蒙板中不透明的部分,应用蒙板的对象将是不透明的;而在不透明蒙板中透明的部分,应用蒙板的对象将是透明的。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

画笔

画笔用于设置美工板上对象的可视外观。例如,可以将纯蓝色画笔用于填充矩形(如下面第一幅图中所示)。画笔有多种形式,包括简单的纯色画笔或渐变画笔、以及更为复杂的平铺画笔。下表说明了 Expression Blend 中提供的画笔。另外,还可以使用“无画笔”Cc294765.706bbd5c-c0e0-43a1-9604-297f019d0275(zh-cn,Expression.10).png 选项卡从选定属性中删除所有颜色。例如,若要创建矩形轮廓,可以将矩形的“Fill”设置为“无画笔”,并将“Stroke”设置为“纯色画笔”。

画笔

外观

描述

纯色画笔

Cc294765.b83764e5-b1f6-4a94-b75b-7513bef1a430(zh-cn,Expression.10).png

由一种颜色组成。

线性渐变画笔

Cc294765.50efa3cf-d265-4ea4-af0f-bdcaed4d15fa(zh-cn,Expression.10).png Cc294765.4f1dddeb-7c03-449d-8199-0fa82122f4b2(zh-cn,Expression.10).png

由线性颜色渐变组成。

径向渐变画笔

Cc294765.c02b5484-1814-40d7-9bd8-1fa88f76fab8(zh-cn,Expression.10).png Cc294765.c66dd0d9-ce5a-4c6c-9621-7b3cc16a9429(zh-cn,Expression.10).png

由径向颜色渐变组成。

图像画笔

(仅适用于 WPF 和 Silverlight 2)

Cc294765.81f84f56-906d-456b-8288-d77da1e01e31(zh-cn,Expression.10).png Cc294765.d3782ca8-64da-47a4-a095-c6cdd0fa47a2(zh-cn,Expression.10).png Cc294765.38ae3691-f3f1-4a1e-82ca-c7fa164bf56e(zh-cn,Expression.10).png

从图像创建。此处显示的内容从左到右分别为:初始图像画笔、平铺的图像画笔和翻转的图像画笔。

图形画笔

(仅适用于 WPF 和 Silverlight 2)

Cc294765.197666ac-ef57-4c5c-9779-669e991a00a5(zh-cn,Expression.10).png Cc294765.ba09cda3-4cee-40ba-b3d4-edc032158bdc(zh-cn,Expression.10).png Cc294765.15bf6021-620c-4490-9eae-086153d3f14f(zh-cn,Expression.10).png

从矢量图形创建。此处显示的内容从左到右分别为:初始图形画笔、平铺的图形画笔和翻转的图形画笔。

可视画笔

(仅适用于 WPF 和 Silverlight 2)

Cc294765.fb6c90e0-153c-48fe-b563-e601beac6227(zh-cn,Expression.10).png Cc294765.e261b99f-7d8f-4d91-bc84-19c7beccc255(zh-cn,Expression.10).png

从按钮等控件创建。此处显示的内容从左到右分别为:初始按钮以及“平铺模式”设置为“平铺”的画笔。请注意,由于创建可视画笔所使用的控件很复杂,可视画笔可能会降低应用程序的运行性能。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

画笔资源

在为对象创建画笔之后,可以将画笔转换为资源,以便将其应用于其他对象。

Cc294765.alert_note(zh-cn,Expression.10).gif说明:

Microsoft Silverlight 1.0 不支持资源。

画笔资源不限于单个画笔或颜色属性。可以通过使用美工板上的多个对象来创建画笔资源。甚至可以创建一个称为“VisualBrush”的画笔,在运行时,如果创建该画笔所使用的对象发生更改,则画笔的外观也将随之更新。

可以为画笔创建资源字典,以便在整个项目乃至其他项目中重用这些画笔。

有关详细信息,请参阅创建画笔或颜色资源创建或修改图形画笔资源。有关资源的信息,请参阅资源概述

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

颜色和颜色空间

Expression Blend 在“属性”面板中的“画笔”下包含一个颜色编辑器。如果在“资源”面板中修改画笔资源,则还会显示颜色编辑器。除了十六进制模式 (#AARRGGBB),颜色编辑器还具有下列四种颜色空间:

  • RGB   红色 (0-255)、绿色 (0-255)、蓝色 (0-255)

  • HLS   色调(360 度颜色盘)、亮度(0% 到 100%)、饱和度(0% 到 100%)

  • HSB   色调(360 度颜色盘)、饱和度(0% 到 100%)、亮度(0% 到 100%)

  • CMYK   蓝绿色(0% 到 100%)、洋红色(0% 到 100%)、黄色(0% 到 100%)、黑色(0% 到 100%)

若要切换颜色空间,请单击当前颜色空间中带下划线的字母,以便查看包含备选颜色空间的弹出菜单。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

“取色器”和“油漆桶”工具

Expression Blend 提供了两种专用于在对象之间复制和应用属性的工具。在执行“取色器”和“油漆桶”操作期间,将复制或应用下列属性:

  • 画笔   Foreground、Background、BorderBrush、Fill、Stroke 和 OpacityMask

  • 外观   Opacity、StrokeThickness、StrokeMiterLimit、StrokeStartLineCap、StrokeEndLineCap、StrokeLineJoin 和 StrokeDashCap

  • 文本   FontFamily、FontSize、FontWeight、FontStyle、TextDecorations、LineHeight、TextIndent 和 TextAlignment

Cc294765.199cf53a-f100-43f6-9a06-7c9f1a453f39(zh-cn,Expression.10).png

“取色器”工具

将另一个对象的外观复制到当前选定的一个或多个对象。

Cc294765.39a62108-d8d1-4c6b-8d89-8678a055ff36(zh-cn,Expression.10).png

“油漆桶”工具

将当前选定的一个或多个对象的外观复制到另一个对象。

有关“取色器”和“油漆桶”工具的详细信息,请参阅复制属性或者向对象应用属性

当修改“纯色画笔”Cc294765.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-cn,Expression.10).png 或“渐变画笔”Cc294765.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(zh-cn,Expression.10).png上的梯度停止点时,“颜色取色器”Cc294765.2ab2d2fb-3478-4b33-87fb-3cdeb9df4d52(zh-cn,Expression.10).png 也会在颜色“编辑器”的右下角出现。通过选择该取色器,您可以从桌面的任意位置上抓取色样,然后将其应用到所选的画笔上。您可以随时按住 Esc 键来取消选择该取色器。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

渐变

利用渐变,可以向对象应用渐变的颜色混合效果,从而创建平滑的颜色渐变并使对象看起来更有深度。您可能希望将对象用作背景,该对象的左侧包含一种纯色,并且渐渐淡化成对象右侧的白色。这样就可以创建两个明显的区域,而不是一个单调的对象。

在“属性”面板中的“画笔”下,单击“线性渐变画笔”Cc294765.209508b1-adaa-4293-8d02-23cade0c599e(zh-cn,Expression.10).png 和“径向渐变画笔”Cc294765.2b3b2e7c-204f-4f66-9c1c-540698186242(zh-cn,Expression.10).png,可在这两种渐变画笔类型之间切换。

可以使用两种类型的渐变画笔来创建渐变填充、渐变笔划、其“Foreground”属性应用了渐变的文本或任何具有“Background”属性的元素的渐变背景。在向外观属性应用渐变时,请注意,渐变滑块上会显示一些小图标 Cc294765.d45e017e-3123-4fc1-9d99-e87b4e3e2202(zh-cn,Expression.10).png,这些小图标称为“停止点”。可以更改每个梯度停止点的颜色,也可以通过直接单击渐变滑块,根据需要在渐变滑块上添加任意数量的停止点。反过来也是一样,可以通过将不再需要的停止点拖出渐变滑块的底部,从而轻松地删除这些停止点(拖出滑块的顶部或两侧不会删除停止点)。

当使用渐变画笔时还可以设置某些选项。在颜色编辑器的底部,单击“选项”按钮可将渐变模式设置为“填充”、“反射”(对渐变填充进行镜像)或“重复”(对渐变填充进行重复)。在使用“画笔转换”Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(zh-cn,Expression.10).png 工具修改画笔时,这些选项同时适用于线性渐变画笔和径向渐变画笔。有关详细信息,请参阅下面的“画笔转换”工具部分。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

“画笔转换”工具

若要转换应用于对象的填充、笔划、不透明蒙板或其他画笔,请在“属性”面板中选择画笔属性,然后在“工具箱”中选择“画笔转换”Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(zh-cn,Expression.10).png 工具。美工板上将显示一个画笔转换箭头,可以使用鼠标指针对其进行修改。如果使用的是渐变画笔,则转换箭头的端点对应于颜色条任意一端的梯度停止点。可以使用以下方法更改“画笔转换”工具的行为:

  • 拖动端点时按住 Shift 键,以限定画笔沿端点之间的直线移动。

  • 移动整个箭头时按住 Shift 键,以将移动范围限定在 X 平面或 Y 平面。

  • 旋转端点时按住 Shift 键,以按 15 度的增量对齐。

  • 拖动某个端点时按住 Alt 键,以同时移动两个端点,从而保持中心点的位置。

下列各图显示了在对“Fill”属性的渐变画笔应用各种转换之后的矩形对象的外观。

Cc294765.ddadfdb4-f9f5-4239-8e56-d04014592af4(zh-cn,Expression.10).png

应用于矩形的线性渐变画笔的转换

Cc294765.06d84067-19a1-4699-af39-18d0b11679a0(zh-cn,Expression.10).png

应用于矩形的径向渐变画笔的转换

可以选择设置在单击“属性”面板中的“画笔”下的“选项”按钮时显示的属性。在上图中,选定了“填充”选项。如果选定了“反射”或“重复”选项,然后使转换箭头比对象短,则会看到波纹效果。

可以转换除渐变画笔以外的其他画笔类型。有关画笔转换的详细信息,请参阅转换渐变或平铺画笔

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

剪切

在转换画笔时,有时会剪切掉对象的某些部分(即,这些部分会消失在范围框之外)。可通过下列方法解决剪切问题:

  • 在“属性”面板的“外观”下,清除“ClipToBounds”属性的复选框。

  • 在“属性”面板的“转换”下,使用“LayoutTransform”类别中的属性而不使用“RenderTransform”类别中的属性。这在转换可视画笔时尤其有用。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

笔划

笔划是对象上的边框。可以更改对象上的笔划所应用的画笔(纯色、渐变或平铺)、不透明度、宽度和斜接限制,还可以更改笔划的角部连接和末端样式。对象上的笔划始终应用在填充之上,即使对象上未应用填充也是如此。若要对对象的笔划进行任何更改,必须在“属性”面板中的“画笔”下的列表中选择“Stroke”。

  • **笔划宽度  ** 对象上笔划的宽度以像素(或设备无关单位,每单位约等于 1/96 英寸)为单位,其值介于 0 到形状宽度或高度的一半之间。通常,在笔划粗细达到形状宽度和高度的一半之后,笔划会覆盖整个填充。可以使用“属性”面板中的“外观”下的“StrokeThickness”属性来设置笔划宽度值。

  • **角部连接  ** 对于具有尖角的对象(如矩形),可应用下列三种角部连接样式中的一种,更改笔划在每个角部顶点处的外观:“斜角连接”Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-cn,Expression.10).png、“圆角连接”Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-cn,Expression.10).png 和“棱台连接”Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-cn,Expression.10).png。可以使用“属性”面板中的“外观”下的“StrokeLineJoin”属性来设置角部连接样式。

    Cc294765.64381b5b-b70f-47a7-b298-4e4f4fe982a6(zh-cn,Expression.10).png

  • **斜接限制  ** 斜接限制控制斜角连接的边角处在自动斜切变成棱台连接之前的长度。可以使用“属性”面板中的“外观”下的“StrokeMiterLimit”属性来设置斜接限制。下图显示了“StrokeThickness”值为 40 而“StrokeMiterLimit”值分别为 1 Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-cn,Expression.10).png、2.2 Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-cn,Expression.10).png 和 4 Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-cn,Expression.10).png 的三个角。角度大小和笔划粗细将确定斜接限制的视觉效果。

    Cc294765.9bed7ef3-df8f-4844-9341-98d3f726f267(zh-cn,Expression.10).png

  • **末端  ** 对于包含未连接末端的路径(如线条),可通过应用下列四种末端样式中的一种,更改笔划两端的外观:“平头”Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-cn,Expression.10).png、“圆头”Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-cn,Expression.10).png、“方头”Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-cn,Expression.10).png 和“三角头”Cc294765.eb6fad93-f17e-4f62-a926-8c8651862891(zh-cn,Expression.10).png。可以使用“属性”面板中的“外观”下的“StrokeEndLineCap”或“StrokeStartLineCap”属性来设置末端样式。

    Cc294765.2e5bbb1b-f631-466d-b510-5a4bf824cc74(zh-cn,Expression.10).png

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

不透明度和可见性

降低对象的不透明度时,会提高其透明度,因而可以看到位于其背后的其他对象。不透明度由 Alpha 通道控制,该通道存储了对象、渐变或透明蒙板的所有透明度信息。下表说明了可以选择用来更改对象的不透明度的三种方法。

方法

结果

Opacity   更改整个对象的透明度,包括对象的所有可视属性。右图显示不透明度值设置为 60% 的效果。

Cc294765.a5f77efb-94c4-4746-9b51-3fcb35d530a1(zh-cn,Expression.10).png

Transparency  设置对象的单个画笔属性(如填充或笔划)的 Alpha 值 (A),使其稍微有些透明,而无需更改一个对象的所有属性。右图显示只有椭圆的填充略显透明,因为填充的 Alpha 值设置为 50%,而椭圆的笔划仍然是 100%。

Cc294765.87ccf3e4-01f4-4b47-b77f-d2099e400983(zh-cn,Expression.10).png

Visibility   使用户能够在不同的时间隐藏或显示对象。这在动画中尤其有用,因为在动画中,不需要从美工板上完全删除对象。在右图中,本表中前两个图左侧的对象(具有蓝色填充和黑色宽笔划)现在设置为“Hidden”。

Cc294765.7c2aa173-830c-4444-b588-f725ea563077(zh-cn,Expression.10).png

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

位图效果

位图效果是一种简单的像素处理操作。

Cc294765.alert_note(zh-cn,Expression.10).gif说明:

Silverlight 1.0 或 Silverlight 2 不支持位图效果。

Cc294765.alert_note(zh-cn,Expression.10).gif说明:

在 Windows Presentation Foundation 应用程序(例如,使用 Expression Blend 创建的应用程序)中,像素 是指设备无关像素 或设备无关单位,相当于在屏幕分辨率设置为 96 点/英寸的显示器上的一个像素的大小。无论显示器大小或屏幕分辨率是多少,每个单位均约等于 1/96 英寸。

下表说明了在 Expression Blend 中可用的各种位图效果。当选择一个对象(如矩形或按钮)时,在“属性”面板的“外观”下会看到位图效果。每种位图效果都显示有子属性,如“模糊”位图效果的“半径”。在运行时,将执行呈现位图效果(和这些效果应用到的对象)所需的像素处理操作。出于此原因,不应向大型可视效果或动画应用位图效果,因为这会降低应用程序的性能。有关如何设置位图效果的信息,请参阅向对象添加位图效果

效果

外观

描述

Cc294765.a33ed89c-afbe-4f5a-a2c0-2fa197d3c726(zh-cn,Expression.10).png

按钮不应用位图效果。

模糊

Cc294765.339caaa0-22b9-44f9-8bbf-77fe92fda69e(zh-cn,Expression.10).png

模拟通过焦点模糊镜头观察对象的效果。

外发光

Cc294765.0004f578-fae6-44e7-9f16-55117f798412(zh-cn,Expression.10).png

在对象外围创建一圈彩色光环。

投影

Cc294765.86ca6ea3-14c9-4b94-9441-bd2186bd4f4d(zh-cn,Expression.10).png

在对象背后创建阴影。

棱台

Cc294765.b0a45c04-5a8a-407c-8bb8-1f4fb22a889e(zh-cn,Expression.10).png

创建棱台,根据指定的曲线抬高图像表面。

浮雕

Cc294765.bd142911-d002-4940-a53b-e00aadba8f49(zh-cn,Expression.10).png

创建可视对象的突起映射效果,以模拟由人造光源形成的深度和纹理。

Cc294765.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首