外觀概觀
變更物件的視覺外觀是 Microsoft® Expression Blend™ 的基本工作。您可使用 [屬性] 面板中 [外觀] 和 [筆刷] 下方的屬性,變更所選取物件的筆觸色彩、填滿色彩、不透明度及可見度。[外觀] 及 [筆刷] 類別的屬性,會視您在 Expression Blend 專案中選取的物件類型,動態調整物件的內容以反映適當的視覺屬性。
通用外觀屬性
變更物件的外觀大多與將筆刷套用至特定屬性有關。下表描述這些屬性。
| 屬性 | 描述 |
|---|---|
| Fill | 設定套用至圖形或路徑內部的筆刷。 |
| Stroke | 設定套用至圖形或路徑外框 (框線) 的筆刷。 |
| Background | 設定套用至物件背景的筆刷。類似按鈕控制項的控制項通常會受到此屬性的影響。 |
| Foreground | 設定套用至物件前景的筆刷。類似文字方塊控制項的控制項通常會受到此屬性的影響。 |
| BorderBrush | 設定套用至特定控制項框線的筆刷。 |
| Opacity | 設定整個物件的不透明度。 |
| Visibility | 決定物件在執行階段是顯示還是隱藏狀態。子物件也可能受父元素的可見度影響。 |
| OpacityMask | 設定要忽略物件色彩並將不透明度轉移至被遮罩物件的筆刷。只要不透明度遮罩是不透明的,被遮罩物件就會是不透明的;只要不透明度遮罩是透明的,遮罩物件就會是透明的。 |
筆刷
筆刷可用來設定物件在畫板上的視覺外觀。例如,您可使用實心藍色筆刷來填滿矩形 (如下列第一個影像所示)。筆刷從簡單的單色或漸層筆刷到較複雜的並排顯示筆刷,可分為幾種形式。下表描述 Expression Blend 提供的筆刷。此外,您也可以使用 [沒有筆刷]
索引標籤,選擇「不」漆上選取的屬性,例如故意不對物件套用填滿或筆觸。
| 筆刷類型 | 描述 | |
|---|---|---|
| 單色筆刷 |
![]() |
由單色組成。 |
| 線性漸層筆刷 |
![]() ![]() |
由線性色彩漸層組成。 |
| 放射狀漸層筆刷 |
![]() ![]() |
由放射狀色彩漸層組成。 |
| 影像筆刷 |
![]() ![]() ![]() |
由影像建立。此處由左至右為:原始的影像筆刷、並排顯示後的影像筆刷,以及翻轉後的影像筆刷。 |
| 繪圖筆刷 |
![]() ![]() ![]() |
由向量繪圖建立。此處由左至右為:原始的繪圖筆刷、並排顯示後的繪圖筆刷,以及翻轉後的繪圖筆刷。 |
| 視覺筆刷 |
![]() ![]() |
由控制項 (例如按鈕) 建立。此處由左至右為:原始的按鈕,以及 [並排顯示模式] 設為 [並排] 的筆刷。請注意,視覺筆刷可能會因用來建立視覺筆刷之控制項的複雜度,而降低執行中之應用程式的效能。 |
筆刷資源
在物件建立筆刷之後,您可將該筆刷轉換為其他資源,以套用到其他物件。您也可為筆刷建立資源字典,以便在整個專案中 (甚至在其他專案中) 重複使用這些筆刷。如需相關資訊,請參閱建立筆刷或色彩資源。如需資源的相關資訊,請參閱資源概觀。
色彩和色彩空間
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 屬性)。將漸層套用至外觀屬性時,請注意漸層滑桿上出現的小圖示
,我們稱為「停駐點」。您可以變更每個漸層停駐點的色彩,也可以直接按一下漸層滑桿,在漸層滑桿上新增任意數目的停駐點。相反地,只要從漸層滑桿的底端拖出不再需要的停駐點,就可以輕易地移除這些停駐點 (從滑桿的兩側或頂端拖出並不會移除停駐點)。
使用漸層筆刷時同樣有一些選項可以設定 ([選項])。當您使用 [工具箱] 的 [筆刷轉換]
時,這些選項適用於線性和放射狀漸層。如需相關資訊,請參閱下面的筆刷轉換工具。
在這裡,您可以選擇將漸層模式設為 [邊框]、[反射] (此選項會建立漸層填滿的鏡像) 或 [重複] (此選項會重複漸層填滿)。
筆刷轉換工具
若要轉換填滿、筆觸、不透明度遮罩或其他套用至物件的筆刷,請選取 [屬性] 面板中的筆刷屬性,然後選取 [工具箱] 上的 [筆刷轉換]
工具。筆刷轉換箭號會顯示在畫板上,您可以使用滑鼠指標來修改它。如果您使用漸層筆刷,轉換箭號的端點會對應至色軸任一端的漸層停駐點。下列影像顯示將多種轉換套用至 [Fill] 屬性的漸層筆刷後,矩形物件所呈現的外觀。


填滿矩形所套用的轉換效果:線性漸層筆刷 (上) 以及放射狀漸層筆刷 (下)
您可選擇設定按下 [屬性] 面板中 [筆刷] 下方的 [選項] 按鈕所顯示的屬性。上圖顯示已選取 [邊框] 選項。如果您選取了 [反射] 或 [重複] 選項,然後讓轉換箭號短於物件,您將看到成波狀的效果。
除漸層筆刷外,您還可將筆刷類型轉換為其他類型。如需筆刷轉換的相關資訊,請參閱轉換漸層或並排顯示筆刷。
裁剪
當您轉換筆刷時,有時可能會裁剪到物件的多個部分 (也就是說,這些部分會消失於選框外頭)。您可以用下列方式修正裁剪問題:
- 取消選取 [屬性] 面板中 [外觀] 下方的 [ClipToBounds] 屬性核取方塊。
- 使用 [LayoutTransform] 類別中的屬性,而不要使用 [屬性] 面板中 [轉換] 下方的 [RenderTransform]。轉換視覺筆刷時,這個方式特別有用。
筆觸
筆觸是物件的框線。您可以變更物件筆觸套用的筆刷 (單色、漸層或並排顯示)、不透明度、寬度和斜接角突出限度,以及接角聯結和結束端點樣式。物件的筆觸一律套用在填滿之上,即使該物件未套用填滿也一樣。若要變更物件的筆觸,您必須在 [屬性] 面板之 [筆刷] 下的清單中選取 [Stroke]。
- 筆觸寬度 物件的筆觸寬度是以像素為測量單位 (與裝置無關的單位,約為 1/96 英吋),其值介於 0 到圖形寬度或高度的一半。一般而言,一旦筆觸粗細達圖形寬度及高度的一半,筆觸就會蓋滿整個填滿。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeThickness] 屬性設定筆觸寬度值。
- 接角聯結 對於有銳角的物件 (例如矩形),有三種接角聯結樣式可以套用來變更每個角點的筆觸外觀:[斜接角聯結]
、[圓角聯結]
及 [斜切聯結]
。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeLineJoin] 屬性設定接角聯結樣式。 
- 斜接角突出限度 斜接角突出限度可控制斜接角聯結角點的長度上限,超過上限就會自動轉成斜切聯結。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeMiterLimit] 屬性設定斜接角突出限度。
- 結束端點 對於末端未連結的路徑 (例如直線),您可以套用四種結束端點樣式來變更每個末端的筆觸外觀:[扁平端點]
、[圓形端點]
、[方形端點]
及 [三角形端點]
。您可以使用 [屬性] 面板之 [外觀] 下的 [StrokeEndLineCap] 或 [StrokeStartLineCap] 屬性設定結束端點樣式。

不透明度和可見度
您可以使用 [屬性] 面板之 [外觀] 下的 [Opacity] 屬性來變更物件的不透明度。降低物件的不透明度就等於增加其透明度,於是您就可以看到背後的其他物件。不透明度是由 Alpha 色板所控制,此色板儲存了物件、漸層或不透明度遮罩的所有透明度資訊。
| 屬性 | 描述 |
|---|---|
| Opacity 變更整個物件的透明度,包括物件的所有視覺屬性。右圖顯示設為 60% 的不透明度值。 |
![]() |
| Transparency 將物件某個屬性 (例如填滿或筆觸) 的 Alpha 值設為稍微透明,而不必變更單一物件的所有屬性。右圖顯示只有橢圓形的填滿較透明,因為該填滿的 Alpha 值設為 50%。橢圓形的筆觸維持在 100%。 |
![]() |
| Visibility 可讓您在不同時候隱藏或顯示物件。在動畫中,當您不要從畫板中完全移除物件時會特別有用。在右圖中,左邊具藍色填滿與粗黑色筆觸的物件 (也是此表中前面兩個圖中的物件) 現已設為 [Hidden]。 |
![]() |
點陣圖效果
點陣圖效果是簡單的像素處理作業。
|
|
在 Windows Presentation Foundation (WPF) 應用程式 (像是以 Expression Blend 建立的應用程式) 中,「像素」指的是與裝置無關的像素或與裝置無關的單位,其與螢幕解析度設為 96 DPI 監視器的像素大小相等。無論監視器大小或螢幕解析度為何,每個單位約為 1/96 英吋。 |
下表描述 Expression Blend 中的每個點陣圖效果。每個點陣圖效果都會顯示可控制 BlurBitmapEffect 篩選屬性的屬性 (例如半徑)。點陣圖效果可以透過即時物件 (例如按鈕或文字方塊) 的屬性設定。像素處理會在執行階段套用和轉譯。由於點陣圖效果是以軟體模式轉譯,任何套用效果的物件也會以軟體模式轉譯。您不應該將點陣圖效果套用至大型視覺元素或動畫,因為這樣會降低應用程式的效能。
| 效果 | 描述 | |
|---|---|---|
| 無 |
|
不套用點陣圖效果的按鈕。 |
| 模糊 |
|
模擬透過失焦鏡頭觀看物件。 |
| 外光暈 |
|
在物件周圍建立色暈。 |
| 延伸陰影 |
|
在物件後方建立陰影。 |
| 斜面 |
|
根據指定的曲線建立拉高影像表面的斜面。 |
| 浮凸 |
|
建立視覺元素的凹凸貼圖,產生來自人工光線的深度與紋理效果。 |
























