设置颜色、画笔和蒙板

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

常见外观属性

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

属性 描述

Fill

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

Stroke

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

Background

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

Foreground

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

BorderBrush

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

Opacity

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

Visibility

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

OpacityMask

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

画笔

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

画笔 外观 描述

纯色画笔

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

由一种颜色组成。

线性渐变画笔

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

由线性颜色渐变组成。

径向渐变画笔

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

由径向颜色渐变组成。

图像画笔

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

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

图形画笔

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

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

可视画笔

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

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

画笔资源

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

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

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

有关详细信息,请参阅创建画笔资源或颜色资源将对象转换为可重用的 DrawingBrush 资源

有关资源的信息,请参阅创建可重用资源

颜色和颜色空间

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%)。

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

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

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.40).png

“取色器”工具

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

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

“油漆桶”工具

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

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

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

渐变

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

在“属性”面板的“画笔”下单击“渐变画笔”Cc294765.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(zh-cn,Expression.40).png 以创建渐变。在颜色“编辑器”下,单击“线性渐变画笔”Cc294765.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(zh-cn,Expression.40).png 和“径向渐变”Cc294765.4279aa9a-15c2-4435-9937-6848afc38618(zh-cn,Expression.40).png,可在这两种渐变画笔类型之间切换。可以使用两种类型的渐变画笔来创建渐变填充、渐变笔划、其“Foreground”属性应用了渐变的文本或任何具有“Background”属性的对象的渐变背景。

如果选择“渐变画笔”,则颜色“编辑器”中的“颜色取色器”将变为“渐变取色器”渐变取色器图标。如果选择了“渐变取色器”,当您将指针悬停在 Expression Blend 内或桌面上的颜色上时,该颜色将以预览的形式出现在所选颜色停止点中。当您使用“渐变取色器”单击某个颜色时,该颜色将应用于所选梯度停止点。此外,您可以将“渐变取色器”拖到 Expression Blend 内或桌面上的现有渐变上,以将渐变应用于现有对象。

跨越现有渐变拖动“渐变取色器”会在 Expression Blend 中复制渐变

拖动渐变取色器

当您将渐变应用于对象时,梯度停止点图标 Cc294765.a3c9e482-e99b-4504-8a02-9507487d1791(zh-cn,Expression.40).png 将出现。可以更改每个梯度停止点的颜色,也可以通过直接单击渐变滑块,根据需要在渐变滑块上添加任意数量的停止点。反过来也是一样,可以通过将不再需要的停止点拖出渐变滑块的底部,从而轻松地删除这些停止点(拖出滑块的顶部或两侧不会删除停止点)。您还可以通过以下方式来修改所选梯度停止点的偏移值:沿渐变线拖动停止点,或修改“选定的梯度停止点偏移”字段中的值。

要反转渐变,请单击“反转梯度停止点”反转渐变图标。您可以通过使用“选择上一个梯度停止点”和“选择后一个梯度停止点”箭头 选择上一个/下一个梯度停止点 来转到上一个和后一个梯度停止点。

要将渐变应用于多个对象,请选择要向其应用渐变的所有对象,然后应用渐变。

单击“显示高级属性”Cc294765.de239c9d-42ce-4f5e-83b9-5f9924c0431f(zh-cn,Expression.40).png 以查看可在“属性”面板中直接修改的附加属性。

对于线性渐变画笔属性,您可以在“属性”面板中修改以下属性:

  • StartPoint   指定线性渐变的起点的坐标。

  • EndPoint    指定线性渐变的终点的坐标。

  • MappingMode   指定渐变画笔的位置是绝对位置,还是相对于范围框确定渐变画笔的位置。

  • SpreadMethod   指定如何绘制在范围框内开始或结束的渐变。Pad:将最外面梯度停止点的颜色扩展到对象的边缘。Reflect:对渐变填充进行镜像。Repeat:对渐变填充进行重复。

  • Opacity   指定渐变画笔的不透明度。

对于径向渐变画笔属性,您可以在“属性”面板中修改以下属性:

  • GradientOrigin   指定渐变的起点的坐标。

  • Center   指定最外面的径向渐变。

  • RadiusX   指定径向渐变的最外面圆的水平半径。

  • RadiusY   指定径向渐变的最外面圆的垂直半径。

  • MappingMode   指定渐变画笔的位置是绝对位置,还是相对于范围框确定渐变画笔的位置。

  • SpreadMethod   指定如何绘制在范围框内开始或结束的渐变。Pad:将最外面梯度停止点的颜色扩展到对象的边缘。Reflect:对渐变填充进行镜像。Repeat:对渐变填充进行重复。

  • Opacity   指定渐变画笔的不透明度。

对于这两种类型的渐变画笔,您还可以通过在“RelativeTransform”框中单击以下选项卡,然后修改关联的值,从而在“属性”面板中修改“RelativeTransform”属性:

  • 转换

  • 旋转

  • 缩放

  • 倾斜

  • 翻转

您还可以通过使用“渐变”工具 Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(zh-cn,Expression.40).png 或“画笔转换”工具 “画笔转换”工具 在美工板上修改线性和径向渐变画笔。有关详细信息,请参阅下面的“渐变工具”和“画笔转换工具”小节。

渐变工具

要对直接在美工板上应用于对象的渐变画笔的填充、笔划或不透明蒙板进行修改,请在“属性”面板中选择画笔属性,然后在“工具”面板中选择“渐变”工具 Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(zh-cn,Expression.40).png

tip note提示:

当对象在美工板上处于选定状态的情况下,按 G 以选择“渐变”工具。

美工板上将出现一个箭头,您可以使用该箭头来修改渐变。该箭头的起点和终点对应于颜色条任意一端的梯度停止点。梯度停止点由带蓝色边框并且内部填充与渐变相同的圆指示。

线性渐变箭头

线性渐变箭头

径向渐变箭头

径向渐变箭头

单击梯度停止点可将其选定,选定状态由粗体蓝色边框指示。双击梯度停止点可显示颜色选取器,您可以从中修改所选梯度停止点的颜色。

渐变颜色选取器

可以通过单击箭头上的任意点来添加梯度停止点。可以通过单击指示梯度停止点的圆并将其拖离箭头来删除梯度停止点。

您还可以通过以下方式修改渐变属性:

  • 拖动起点或终点时按住 Shift 键,以将移动范围限定为起点和终点之间的直线。

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

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

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

“画笔转换”工具

“画笔转换”工具 “画笔转换”工具 可修改画笔资源的“RelativeTransform”属性,其中包括线性和径向渐变的“RelativeTransform”。“画笔转换”工具对在“画笔”面板中选择并应用于在美工板上所选对象的画笔进行修改。

要对直接在美工板上应用于对象的画笔的转换进行修改,请在“属性”面板中选择画笔属性,然后在“工具”面板中选择“画笔转换”工具 “画笔转换”工具

tip note提示:

当对象在美工板上处于选定状态的情况下,按 B 以选择“画笔转换”工具。

对象周围会出现一个装饰器(蓝色边框)。当对象在“画笔转换”工具中处于选定状态的情况下,您现在可以通过以下方式修改所选对象:

  • 要移动画笔,请在对象内的任意位置拖动。这对应于此“属性”面板的“RelativeTransform”框上的“转换”选项卡。

  • 要旋转画笔,请将指针移到对象周围的范围轮廓上的任意角点之外,并在指针变为旋转图柄 Cc294765.888cbf6b-c442-424d-977d-61d942703c4a(zh-cn,Expression.40).png 时拖动。这对应于此“属性”面板的“RelativeTransform”框上的“旋转”选项卡。

  • 要重新缩放平铺画笔或径向渐变画笔,请将指针移到对象边角处的任意图柄上,然后拖动。这对应于此“属性”面板的“RelativeTransform”框上的“缩放”选项卡。

  • 要倾斜画笔,请将指针移到边缘图柄之外,并在指针变为倾斜图柄 Cc294765.2be41f49-8a61-4966-bf08-598f4253b610(zh-cn,Expression.40).png 时拖动。这对应于此“属性”面板的“RelativeTransform”框上的“倾斜”选项卡。

您也可以翻转转换。在“属性”面板的“画笔”类别中,单击“显示高级选项”Cc294765.de239c9d-42ce-4f5e-83b9-5f9924c0431f(zh-cn,Expression.40).png。在“RelativeTransform”框中,单击“翻转”选项卡,然后单击“X 轴翻转”或“Y 轴翻转”。

剪切

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

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

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

笔划

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

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

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

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

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

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

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

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

  • StrokeDashArray     StrokeDashArray 是一种带有短划线和间隙图案的笔划。 StrokeDashCap 和 StrokeDashOffset 是特定适用于 StrokeDashArray 的属性。

    下图显示一个单一矩形,其 StrokeDashArray 值为 5 4(第一个值指定短划线的长度,第二个值指定间隙的长度)、 StrokeDashCap 值为 Round ,并且 StrokeDashOffset (短划线在其中开始的短划线图案内的距离)为 2

    StrokeDashArray

不透明度和可见性

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

方法 结果

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

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

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

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

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

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

另请参阅

概念

应用效果

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。