共用方式為


設定色彩、筆刷與遮罩

變更物件的視覺外觀是 Microsoft Expression Blend 的基本工作。您可使用 [屬性] 面板中 [外觀] 和 [筆刷] 下方的屬性,變更所選物件的筆觸色彩、填滿色彩、不透明度及可見度。[外觀] 及 [筆刷] 類別的屬性會根據您在 Expression Blend 專案中選取的物件類型動態調整為物件的內容,以反映適當的視覺屬性。

一般外觀屬性

若要變更物件的外觀,大多須將筆刷套用至特定屬性。下表描述這些屬性。

屬性

描述

Fill

設定套用至圖形或路徑內部的筆刷。

Stroke

設定套用至圖形或路徑外框 (框線) 的筆刷。

Background

設定套用至物件背景的筆刷。此屬性通常會套用至顯示文字之控制項 (例如 ButtonTextBlock 控制項) 的背景,。

Foreground

設定套用至物件前景的筆刷。此屬性通常會套用至 ButtonTextBlock 等控制項中所顯示的文字。

BorderBrush

設定套用至特定控制項框線的筆刷。

Opacity

設定整個物件的不透明度。

Visibility

決定物件在執行階段是顯示還是隱藏狀態。子物件也可能受父元素的可見度影響。

OpacityMask

設定要忽略物件色彩並將不透明度轉移至被遮罩物件的筆刷。只要不透明度遮罩是不透明的,被遮罩物件就會是不透明的;只要不透明度遮罩是透明的,遮罩物件就會是透明的。

筆刷

筆刷可用來設定物件在畫板上的視覺外觀。例如,您可使用實心藍色筆刷填滿矩形 (如下列第一個影像所示)。筆刷從簡單的單色或漸層筆刷到較複雜的拼貼筆刷,可分為幾種形式。下表說明 Expression Blend 提供的筆刷。此外,您也可以使用 [沒有筆刷] Cc294765.706bbd5c-c0e0-43a1-9604-297f019d0275(ZH-TW,Expression.30).png,從選取的屬性中移除所有色彩。例如,若要建立矩形外框,您可以將矩形的 [Fill] 設為 [沒有筆刷],並將 [Stroke] 設為 [單色筆刷]。

筆刷

外觀

描述

單色筆刷

Cc294765.b83764e5-b1f6-4a94-b75b-7513bef1a430(ZH-TW,Expression.30).png

由單色組成。

線性漸層筆刷

Cc294765.50efa3cf-d265-4ea4-af0f-bdcaed4d15fa(ZH-TW,Expression.30).png Cc294765.4f1dddeb-7c03-449d-8199-0fa82122f4b2(ZH-TW,Expression.30).png

由線性色彩漸層組成。

放射狀漸層筆刷

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

由放射狀色彩漸層組成。

影像筆刷

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

由影像建立。此處由左至右為:原始的影像筆刷、並排顯示後的影像筆刷,以及翻轉後的影像筆刷。

繪圖筆刷

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

由向量繪圖建立。此處由左至右為:原始的繪圖筆刷、並排顯示後的繪圖筆刷,以及翻轉後的繪圖筆刷。

視覺筆刷

Cc294765.fb6c90e0-153c-48fe-b563-e601beac6227(ZH-TW,Expression.30).png Cc294765.e261b99f-7d8f-4d91-bc84-19c7beccc255(ZH-TW,Expression.30).png

由控制項 (例如按鈕) 建立。此處由左至右為:原始的按鈕,以及 [拼貼模式] 設為 [拼貼] 的筆刷。請注意,視覺筆刷可能會因用來建立視覺筆刷之控制項的複雜度,而降低執行中應用程式的效能。

筆刷資源

在物件建立筆刷之後,您可將該筆刷轉換為其他資源,以套用到其他物件。

筆刷資源不受限於單一筆刷或色彩屬性。您可以使用畫板上的數個物件建立一個筆刷資源。您甚至可以建立名為 VisualBrush 的筆刷,而在執行階段隨著其建立來源物件的變更而更新其本身的外觀。

您可為筆刷建立資源字典,以便在整個專案中 (甚至在其他專案中) 重複使用這些筆刷。

如需詳細資訊,請參閱建立筆刷或色彩資源將物件轉換成可重複使用的筆刷資源

如需有關資源的詳細資訊,請參閱建立可重複使用的資源

色彩和色彩空間

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 提供兩項特別設計用以在物件間複製及套用屬性的工具。在 [滴管] 及 [油漆桶] 動作期間會複製或套用下列屬性:

  • 筆刷   前景、背景、框線筆刷、填滿、筆觸及不透明度遮罩

  • 外觀   不透明度、筆觸粗細、筆觸斜接角突出限度、筆觸開始線段端點、筆觸結束線段端點、筆觸合併線段及筆觸虛線端點

  • 文字   字型家族、字型大小、字型寬度、字型樣式、文字裝飾、行高、文字縮排及文字對齊

Cc294765.199cf53a-f100-43f6-9a06-7c9f1a453f39(ZH-TW,Expression.30).png

滴管工具

將其他物件的外觀複製到目前選取的一或多個物件。

Cc294765.39a62108-d8d1-4c6b-8d89-8678a055ff36(ZH-TW,Expression.30).png

油漆桶工具

將目前選取的一或多個物件的外觀複製到其他物件。

如需有關 [滴管] 和 [油漆桶] 工具的詳細資訊,請參閱將屬性複製或套用至物件

修改 [單色筆刷] Cc294765.3a66ec96-47bb-47fc-8876-6b9456feec3a(ZH-TW,Expression.30).png 或 [漸層筆刷] Cc294765.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(ZH-TW,Expression.30).png 上的漸層停駐點時,[色彩滴管] Cc294765.2ab2d2fb-3478-4b33-87fb-3cdeb9df4d52(ZH-TW,Expression.30).png 也會出現在色彩編輯器的右下方。選取滴管後,您可以從桌面上的任意處擷取色彩範例並套用至選取的筆刷。您可以隨時按下 ESC 鍵取消滴管。

漸層

漸層可讓您在物件上套用漸變的混合色彩,以建立平滑的色彩漸層以及增加物件的深度。您或許要以該物件作為背景,從物件的左邊到右邊,逐漸由單色淡化成白色。這便會在原本單調的物件上產生兩個感覺不同的區域。

在 [屬性] 面板中的 [筆刷] 下,按一下 [線性漸層] 筆刷 Cc294765.bd5eefed-9628-4363-be5d-29bfb5962175(ZH-TW,Expression.30).png 與 [放射漸層] Cc294765.4279aa9a-15c2-4435-9937-6848afc38618(ZH-TW,Expression.30).png,在兩項漸層筆刷類型間進行切換。

您可以使用這兩種漸層筆刷建立漸層填滿、漸層筆觸、Foreground 屬性為漸層的文字,或漸層背景 (但元素需具有 Background 屬性)。將漸層套用至外觀屬性時,請注意漸層滑桿上出現的小圖示 Cc294765.a3c9e482-e99b-4504-8a02-9507487d1791(ZH-TW,Expression.30).png,我們稱為「停駐點」。您可以變更每個漸層停駐點的色彩,也可以直接按一下漸層滑桿,在漸層滑桿上新增任意數目的停駐點。相反地,只要從漸層滑桿的底端拖出不再需要的停駐點,就可以輕易地移除這些停駐點 (從滑桿的兩側或頂端拖出並不會移除停駐點)。

使用漸層筆刷時,您也可以設定一些選項。在 [屬性] 面板中的 [筆刷] 下,按一下 [進階屬性選項] Cc294765.de239c9d-42ce-4f5e-83b9-5f9924c0431f(ZH-TW,Expression.30).png 以將 [SpreadMethod] 屬性設為下列任一項:

  • 邊框   將最外層的的漸層停駐點延伸至物件的邊緣。

  • 反射   建立漸層填滿的鏡像。

  • 重複   重複漸層填滿。

當您使用 [筆刷轉換] Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(ZH-TW,Expression.30).png 修改筆刷時,這些選項將同時適用於線性和放射漸層筆刷。如需詳細資訊,請參閱稍後的<筆刷轉換工具>一節。

筆刷轉換工具

若要轉換填滿、筆觸、不透明度遮罩或其他套用至物件的筆刷,請選取 [屬性] 面板中的筆刷屬性,然後選取 [工具] 面板中的 [筆刷轉換] Cc294765.8dc54a0d-02cc-44cd-b802-5a78309f4503(ZH-TW,Expression.30).png。筆刷轉換箭號會顯示在畫板上,您可以使用滑鼠指標加以修改。如果您使用漸層筆刷,轉換箭號的端點會對應至色軸任一端的漸層停駐點。您可以透過下列方式變更筆刷轉換工具的行為:

  • 按住 SHIFT 鍵並拖曳端點,將其移動限定為沿著端點間的直線。

  • 按住 SHIFT 鍵並移動整個箭號,將其移動限定為移往 X 或 Y 平面。

  • 按住 SHIFT 鍵並旋轉端點,可每隔 15 度貼齊一次。

  • 按住 ALT 鍵並拖曳一個端點,可同時移動兩個端點而維持中心點的位置。

下列影像顯示將多種轉換套用至 [Fill] 屬性的漸層筆刷後,矩形物件所呈現的外觀。

Cc294765.ddadfdb4-f9f5-4239-8e56-d04014592af4(ZH-TW,Expression.30).png

套用至矩形之線性漸層筆刷的轉換

Cc294765.06d84067-19a1-4699-af39-18d0b11679a0(ZH-TW,Expression.30).png

套用至矩形之放射漸層筆刷的轉換

您可以選擇設定漸層筆刷的擴散方式:按一下 [屬性] 面板中 [筆刷] 底下的 [進階屬性選項] Cc294765.de239c9d-42ce-4f5e-83b9-5f9924c0431f(ZH-TW,Expression.30).png,然後設定 [SpreadMethod] 屬性。上圖中已選取 [邊框] 選項。若選取了 [反射] 或 [重複] 選項,然後使轉換箭號短於物件,將會出現波狀的效果。

除漸層筆刷外,您還可將筆刷類型轉換為其他類型。如需有關筆刷轉換的詳細資訊,請參閱轉換漸層或拼貼筆刷

裁剪

當您轉換筆刷時,有時可能會裁剪到物件的多個部分 (也就是說,這些部分會消失於週框方塊外)。您可以用下列方式修正裁剪問題:

  • 在 [屬性] 面板中的 [外觀] 下,清除 [ClipToBounds] 屬性的核取方塊。

  • 使用 [LayoutTransform] 類別中的屬性,而不要使用 [屬性] 面板中 [轉換] 下方的 [RenderTransform]。這種方式尤其適用於轉換視覺筆刷時。

筆觸

筆觸是物件的框線。您可以變更物件筆觸套用的筆刷 (單色、漸層或拼貼)、不透明度、粗細和斜接角突出限度,以及邊角交接和結束端點樣式。物件的筆觸一律套用在填滿之上,即使該物件未套用填滿也一樣。若要變更物件的筆觸,您必須在 [屬性] 面板之 [筆刷] 下的清單中選取 [Stroke]。

  • 筆觸粗細   物件的筆觸粗細以像素 (換算為與裝置無關的單位約為 1/96 英吋) 為測量單位,其值介於 0 到圖形寬度或高度的一半。一般而言,一旦筆觸粗細達圖形寬度及高度的一半,筆觸就會蓋滿整個填滿區域。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeThickness] 屬性設定筆觸寬度值。

  • 邊角交接   對於有銳角的物件 (例如矩形),有三種邊角交接樣式可供套用以變更每個角點的筆觸外觀:[斜邊角交接] Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(ZH-TW,Expression.30).png、[圓角聯結] Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ZH-TW,Expression.30).png 及 [斜切聯結] Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(ZH-TW,Expression.30).png。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeLineJoin] 屬性設定邊角交接樣式。

    Cc294765.64381b5b-b70f-47a7-b298-4e4f4fe982a6(ZH-TW,Expression.30).png

  • 斜接角突出限度   斜接角突出限度可控制斜邊角交接角點的長度上限,超過上限就會自動轉成斜切聯結。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeMiterLimit] 屬性設定斜接角突出限度。下圖顯示 [StrokeThickness] 為 40,[StrokeMiterLimit] 為 1 Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(ZH-TW,Expression.30).png、2.2 Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ZH-TW,Expression.30).png 與 4 Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(ZH-TW,Expression.30).png 的三個角。角度大小和筆觸粗細將決定斜接角突出限度的視覺效果。

    Cc294765.9bed7ef3-df8f-4844-9341-98d3f726f267(ZH-TW,Expression.30).png

  • 結數端點   對於末端未連結的路徑 (例如直線),有四種結束端點樣式可供套用以變更每個末端的筆觸外觀:[平端點] Cc294765.25182a96-9a69-478a-9cfe-5b360e6a9bea(ZH-TW,Expression.30).png、[圓端點] Cc294765.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ZH-TW,Expression.30).png、[方端點] Cc294765.f0c1ff71-7814-42ba-806b-7ea92d616e69(ZH-TW,Expression.30).png 與 [三角頭] Cc294765.eb6fad93-f17e-4f62-a926-8c8651862891(ZH-TW,Expression.30).png。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeEndLineCap] 或 [StrokeStartLineCap] 屬性,設定結束端點樣式。

    Cc294765.2e5bbb1b-f631-466d-b510-5a4bf824cc74(ZH-TW,Expression.30).png

不透明度和可見度

降低物件的不透明度就等於增加其透明度,使您可看到背後的其他物件。不透明度是由 Alpha 色板所控制,此色板儲存了物件、漸層或不透明度遮罩的所有透明度資訊。下表描述三種可供選取以變更物件不透明度的方法。

方法

搜尋結果

Opacity   變更整個物件的透明度,包括物件的所有視覺屬性。右圖顯示設為 60% 的不透明度值。

Cc294765.a5f77efb-94c4-4746-9b51-3fcb35d530a1(ZH-TW,Expression.30).png

Transparency   將物件某個筆刷屬性 (例如填滿或筆觸) 的 Alpha 值 (A) 設為稍微透明,而不必變更單一物件的所有屬性。右圖顯示只有橢圓形的填滿較透明,因為該填滿的 Alpha 值設為 50%。橢圓形的筆觸維持在 100%。

Cc294765.87ccf3e4-01f4-4b47-b77f-d2099e400983(ZH-TW,Expression.30).png

Visibility   可讓您在不同時候隱藏或顯示物件。在動畫中,當您不要從畫板中完全移除物件時會特別有用。在右圖中,左邊具藍色填滿與粗黑色筆觸的物件 (也是此表中前面兩個圖中的物件) 現已設為 [Hidden]。

Cc294765.7c2aa173-830c-4444-b588-f725ea563077(ZH-TW,Expression.30).png

請參閱

概念

套用效果