控制項概觀

本頁適用於 WPF 和 Silverlight 2

Microsoft Expression Blend 提供詳細的控制項清單,可讓您為 Windows Presentation Foundation (WPF) 和 Silverlight 2 應用程式設計多功能的使用者介面。

Cc294749.alert_note(zh-tw,Expression.10).gif注意事項:

如需 Microsoft Silverlight 1.0 專案中的可用控制項清單,請參閱 Silverlight 1.0 概觀的<控制項>一節。

Expression Blend 不僅可讓您利用預設或系統 WPF 控制項,它還可讓您依個人喜好實際自訂和設計控制項,讓控制項按照您想要的方式執行。您也可以透過使用 Expression Blend 中的資源,讓自訂控制項呈現獨特而討喜的外觀,使您的應用程式與眾不同,以打造深刻的品牌印象或讓所有應用程式擁有一致的使用者介面 (UI)。Expression Blend 中的控制項編輯模型最大的優勢之一,是設計人員可在開發人員撰寫程式設計邏輯的同時設計應用程式的外觀。設計人員可以直接進行設計,因此可讓設計在從製作模型到實作的轉化過程中,不致遺漏。

什麼是控制項?

控制項 (或 UI 設計元素) 是應用程式的可見元件。控制項 (例如按鈕或可選項目清單) 可讓使用者與應用程式互動。若瞭解 Expression Blend 中可用的控制項及自訂這些控制項的方法,就可讓應用程式具有您想要的外觀與行為。

Expression Blend 可讓您在畫板上以視覺化的方式使用控制項,並在屬性面板互動面板面板中設定外觀與行為。例如,您可新增 [Button] 控制項至畫板,修改 [屬性] 面板中的值以變更外觀,然後在 [互動] 面板中新增按鈕的事件觸發程序,當按鈕按下時就會啟動動畫時間軸。

除了這些簡單的動作之外,您還可以對控制項執行下列事項:

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

控制項類別

在 Expression Blend 中,您可使用許多不同類型的控制項,迅速地設計外觀獨特的應用程式。

所有控制項都在資產庫中,只要按一下工具箱底部的 [資產庫] Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png 按鈕,即可使用。[工具箱] 位於 Expression Blend 的左側。從 [資產庫] 選取 UI 元素時,該元素的圖示會出現在 [資產庫] 按鈕上方,以便您後續再次選取元素。最常用的 UI 元素已顯示於 [資產庫] 按鈕上方,讓您可迅速找到這些 UI 元素。

下圖顯示將常用 UI 元素新增為物件之後的畫板。[畫筆] Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-tw,Expression.10).png 工具可產生 Path Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(zh-tw,Expression.10).png 物件。在 [工具箱] 中顯示於 [Image] 控制項之後的 [影像] Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(zh-tw,Expression.10).png 圖示選取自 [資產庫]。

從 [工具箱] 到畫板

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(zh-tw,Expression.10).png

Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-tw,Expression.10).png

名為 [Path_40] 的路徑物件,代表橘色樣本的圖形。

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(zh-tw,Expression.10).png

未命名的按鈕物件,代表應用程式中標示為「重設影像」的按鈕。[物件與時間軸] 下的底線 (_) 可用以識別按鈕的便捷鍵。

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-tw,Expression.10).png

名為 [Rectangle_44] 的矩形物件,代表彩色樣本上的繪圖卡。

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(zh-tw,Expression.10).png

名為 [photo_bathroom] 的影像物件,代表空間的背景影像。

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-tw,Expression.10).png

以其所含文字識別的未命名文字區塊,代表應用程式的標題 "Color Swatch Sample Pack 1"。

為了幫助您決定要使用哪一個控制項,請依下列類別考慮控制項:

類別

使用

範例

圖形 (適用於 Silverlight 1.0 專案)

藉由使用橢圓形、線條及矩形來建立豐富的視覺元素,您可讓它們的外觀如您所想要的一樣簡單,或一樣複雜而色彩豐富。如需詳細資訊,請參閱繪製圖案與路徑

您可在 Expression Blend 中使用 [屬性] 面板或者只使用樣式 (而不使用範本) 自訂這些元素的外觀與行為。如需詳細資訊,請參閱編輯樣式

矩形 Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(zh-tw,Expression.10).png

橢圓形 Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(zh-tw,Expression.10).png

路徑 (由 [線條] Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(zh-tw,Expression.10).png、[畫筆] Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-tw,Expression.10).png 與 [鉛筆] Cc294749.509dc167-734f-46c9-b012-987ee63450cd(zh-tw,Expression.10).png 等繪圖工具產生)

版面配置面板

做為其他 UI 元素的容器,用以指定其位置與視窗調整大小行為。

不同於大部分的 UI 元素,有些版面配置面板 (例如格線) 可包含多個子元素。這對整理和配置應用程式設計而言相當有用。

如需詳細資訊,請參閱版面配置

您可在 Expression Blend 中使用 [屬性] 面板或使用樣式 (而不使用範本) 自訂這些元素的外觀與行為。如需詳細資訊,請參閱編輯樣式

畫布 Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(zh-tw,Expression.10).png (適用於 Silverlight 1.0 專案)

固定 Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(zh-tw,Expression.10).png

格線 Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-tw,Expression.10).png

堆疊 Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(zh-tw,Expression.10).png

換行 Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(zh-tw,Expression.10).png

文件/文字

用以定義文件呈現方式與文字格式設定。如需詳細資訊,請參閱文字與印刷格式概觀

您可在 Expression Blend 中使用 [屬性] 面板或同時使用樣式與範本自訂這些元素的外觀與行為。如需詳細資訊,請參閱建立或編輯控制項範本編輯樣式

TextBox Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(zh-tw,Expression.10).png

TextBlock Cc294749.42165963-00f7-4a33-abcd-b0849edebada(zh-tw,Expression.10).png (適用於 Silverlight 1.0 專案)

RichTextBox Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(zh-tw,Expression.10).png

Label Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(zh-tw,Expression.10).png

PasswordBox Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(zh-tw,Expression.10).png

控制項

用以提供使用者與應用程式互動的方式。

您可在 Expression Blend 中使用 [屬性] 面板或同時使用樣式與範本自訂這些元素的外觀與行為。如需詳細資訊,請參閱建立或編輯控制項範本編輯樣式

Button Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(zh-tw,Expression.10).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-tw,Expression.10).png

Menu Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(zh-tw,Expression.10).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(zh-tw,Expression.10).png

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(zh-tw,Expression.10).png

裝飾項目

用以套用效果至其他元素。裝飾項目可包含一個子元素,通常是受裝飾項目影響外觀的元素。

這些元素通常用於可套用至其他控制項的範本中,例如按鈕範本中的 [ButtonChrome] 元素。您可在 Expression Blend 中使用 [屬性] 面板或者只使用樣式 (而不使用範本) 自訂裝飾元素的外觀與行為。如需詳細資訊,請參閱編輯樣式

Border Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(zh-tw,Expression.10).png

ButtonChrome

Viewbox

如需有關這些控制項類型之特性的詳細資訊,請參閱 MSDN 文件庫Windows Presentation Foundation 一節的類型系列 (英文)。

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

建立及修改控制項

您可以在 [工具箱] 中按兩下控制項的圖示,或在 [工具箱] 中選取其圖示,然後使用滑鼠在畫板上繪製元素,以將控制項新增至畫板。如需詳細資訊,請參閱控制項中所列的使用方法主題。在 [資產庫] 中按兩下控制項,可將控制項以預設大小插入目前使用的元素中。在大部分情況中,預設大小會設為「自動」,使控制項在新增內容時會正確調整大小,因此此功能相當有用。

將控制項新增至 Expression Blend 中的畫板後,控制項會成為您應用程式中的「物件」。有許多方法可供您修改物件,例如使用物件控點調整大小、移動、旋轉、翻轉或扭曲物件,或利用 [屬性] 面板輸入大小、位置及旋轉的精確值。如需詳細資訊,請參閱新增或修改物件,或使用物件和屬性中所列的使用方法主題。

Expression Blend 可透過獨特的方式讓您操作控制項。您可以在控制項內放入任何其他控制項、面板或圖形元素。將控制項結合在一起時,此功能十分有用。例如,若要建立內含影像與文字的按鈕,只需在按鈕中置入 [堆疊] 面板控制項,然後將影像與文字控制項新增至 [堆疊] 面板即可。

控制項會遵循特定的繼承規則。例如,有一些控制項可當作父元素,而且內含子元素 (內容)。其他控制項不支援子元素。Expression Blend 會不斷嘗試將子元素新增至文件內的根元素 (或最上層面板)。這意味著在您一開始使用 Expression Blend 時會將 [LayoutRoot] 元素視為根元素,且此元素將是所有插入文件中子元素的預設目的地。若要新增子元素至文件內不同的控制項,您必須在 [物件與時間軸] 下按兩下控制項的名稱,以啟動該控制項。黃色的反白顯示可識別啟動的元素,讓您知道要新增控制項的位置。

Expression Blend 支援下列不同類型的控制項 (依其支援的繼承類型分類):

類別

描述

範例

簡單控制項

簡單控制項由控制項本身與可對其設定的屬性所組成。簡單控制項不包含任何內容。換句話說,這些控制項內不能有子元素。

影像 Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(zh-tw,Expression.10).png (適用於 Silverlight 1.0 專案)

ScrollBar Cc294749.6513a026-499e-4296-8a67-7558b466bd33(zh-tw,Expression.10).png

內容控制項

內容控制項可包含其他元素 (或在簡單的情況中可將字串顯示為文字)。內容控制項具有 Content 屬性。這表示內容控制項可包含單一內容,例如字串。另外,內容控制項亦可包含其他元素,例如版面配置面板。如需範例,請參閱主題建立內容控制項

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(zh-tw,Expression.10).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(zh-tw,Expression.10).png

項目控制項

項目集合控制項包含子元素的集合。您可手動將項目新增至 Items 集合屬性,也可將資料集合繫結至 ItemsSource 屬性。項目集合控制項會公開項目集合,而且不具 Content 屬性與 Header 屬性。如需範例,請參閱主題建立項目控制項

ComboBox Cc294749.b174a511-dd12-4a45-a986-034de7693de9(zh-tw,Expression.10).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(zh-tw,Expression.10).png

已加上標題的控制項

已加上標題的控制項,包含可標記控制項的標題子元素。已加上標題的控制項可包含內容 (已加上標題的內容控制項) 或項目集合 (已加上標題的項目控制項)。如需範例,請參閱主題建立已加上標題的控制項

TabControl Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(zh-tw,Expression.10).png

TabItem

MenuItem Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(zh-tw,Expression.10).png

如需有關上述控制項類型之特性的詳細資訊,請參閱 MSDN 文件庫 (英文) 的<Windows Presentation Foundation>一節的「內容模型」主題。

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

樣式與範本

如前述控制項概觀中所說明,您可以利用許多方式自訂控制項 (包括建立控制項的範本及樣式),以便產生獨特而一致的應用程式外觀。範本及樣式可分別定義控制項的組成部分,以及控制項的行為。您無法修改系統樣式及範本,因此請務必製作控制項的預設系統樣式及範本複本,以便建立範本及樣式。只要修改範本及樣式即可在 Expression Blend 的 [設計] 檢視中輕鬆製作新的控制項,並不需要使用程式碼。如需詳細資訊,請參閱樣式及範本概觀

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首