選擇及使用互動式控制項

Microsoft Expression Blend 提供多種可讓您為 Windows Presentation Foundation (WPF) 與 Microsoft Silverlight 應用程式設計多功能使用者介面的控制項。

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

什麼是控制項？

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

Expression Blend 可讓您在畫板上以視覺化的方式使用控制項，並在 [屬性] 面板與 [物件與時間軸] 面板中設定外觀與行為。例如，您可新增 [Button] 控制項至畫板，修改 [屬性] 面板中的值以變更外觀，再從 [資產] 面板中新增行為以在按下按鈕時啟動動畫時間軸。

如需詳細資訊，請參閱屬性面板與物件與時間軸面板。

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

• 將屬性 (例如筆刷色彩) 轉換成可套用至其他控制項的資源，為應用程式建立獨特而一致的外觀。

  如需範例，請參閱建立資源。

• 為控制項建立用於定義外觀與行為的新範本和樣式，也可讓應用程式產生獨特而一致的外觀。範本和樣式可包含觸發程序，而且可使用資源設定屬性。如需詳細資訊，請參閱稍後的＜樣式與範本＞一節。

  如需詳細資訊，請參閱下列主題：

  • 建立樣式

  • 建立或修改範本

  • 建立可重複使用的範本以設定系統控制項的樣式

  • 在專案中建立控制項的面板

• 對控制項新增動畫及互動功能。

  如需範例，請參閱建立簡單動畫。

• 在程式碼後置檔案的事件處理常式方法中，為控制項設定更複雜的行為。

  如需詳細資訊，請參閱建立新的事件處理常式方法與試試看：在 Silverlight 應用程式中動態載入新網頁。

• 設計自有的自訂控制項在 Expression Blend 中使用。

  如需詳細資訊，請參閱下列主題：

  • 在專案中建立新的使用者控制項

  • 建立空白使用者控制項

  • 試試看：建立含有自訂屬性的自訂控制項

控制項類別

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

所有控制項都在 [資產] 面板中，只要按一下 [工具] 面板底部的 [資產]  即可使用。[工具] 面板位於 Expression Blend 的左側。從 [資產] 面板選取 UI 元素時，該元素的圖示會出現在 [資產] 按鈕下方，以便您後續再次選取元素。最常用的 UI 元素已顯示於 [資產] 按鈕下方，讓您可迅速找到這些 UI 元素。

如需詳細資訊，請參閱資產面板與工具面板。

下圖顯示將常用 UI 元素新增為物件之後的畫板。[畫筆] 工具 可產生 [Path] 物件 。從 [資產] 面板選取 [Image] 控制項之後，[工具] 面板中已出現 [影像] 圖示 。

從 [工具] 面板到畫板

	名為 [Path_40] 的路徑物件，代表橘色樣本的圖形。		未命名的按鈕物件，代表應用程式中標示為「重設影像」的按鈕。[物件與時間軸] 面板中的底線 (_) 可用以識別按鈕的便捷鍵。
	名為 [Rectangle_44] 的矩形物件，代表彩色樣本上的繪圖卡。		名為 [photo_bathroom] 的影像物件，代表空間的背景影像。
	以其所含文字識別的未命名文字區塊，代表應用程式的標題 "Color Swatch Sample Pack 1"。

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

類別	使用	範例
圖形	藉由使用橢圓形、線條及矩形來建立豐富的視覺元素，您可讓它們的外觀如您所想要的一樣簡單，或一樣複雜而色彩豐富。 如需詳細資訊，請參閱繪製圖形與路徑。 您可在 Expression Blend 中使用 [屬性] 面板或者只使用樣式 (而不使用範本) 自訂這些元素的外觀與行為。 如需詳細資訊，請參閱編輯樣式。	Rectangle  Ellipse  Path (由 [線條] 、[畫筆]  與 [鉛筆]  等繪圖工具產生)
版面配置面板	作為其他 UI 元素的容器，用以指定其位置與視窗調整大小行為。 不同於大部分的 UI 元素，有些版面配置面板 (例如格線) 可包含多個子元素。這對整理和配置應用程式設計而言相當有用。 如需詳細資訊，請參閱排列物件。 您可在 Expression Blend 中使用 [屬性] 面板或使用樣式 (而不使用範本) 自訂這些元素的外觀與行為。 如需詳細資訊，請參閱編輯樣式。	Canvas  Dock  Grid  Stack  Wrap
文件/文字	用以定義文件呈現方式與文字格式設定。 如需詳細資訊，請參閱繪製文字。 您可在 Expression Blend 中使用 [屬性] 面板或同時使用樣式與範本自訂這些元素的外觀與行為。 如需詳細資訊，請參閱建立或修改範本與編輯樣式。	TextBox  TextBlock  RichTextBox  Label  PasswordBox
控制項	用以提供使用者與應用程式互動的方式。 您可在 Expression Blend 中使用 [屬性] 面板或同時使用樣式與範本自訂這些元素的外觀與行為。 如需詳細資訊，請參閱建立或修改範本與編輯樣式。	Button  ListBox  Menu  RadioButton  CheckBox
裝飾項目	用以套用效果至其他元素。裝飾項目可包含一個子元素，通常是受裝飾項目影響外觀的元素。 這些元素通常用於可套用至其他控制項的範本中，例如按鈕範本中的 [ButtonChrome] 元素。您可在 Expression Blend 中使用 [屬性] 面板或者只使用樣式 (而不使用範本) 自訂裝飾元素的外觀與行為。 如需詳細資訊，請參閱編輯樣式。	Border  ButtonChrome Viewbox

如需有關這些控制項類型之特性的詳細資訊，請參閱 MSDN 上 Windows Presentation Foundation 一節的 Type Families (類型系列) 主題。

建立及修改控制項

您可以在 [工具] 面板中按兩下控制項的圖示，或在 [工具] 面板中選取其圖示，然後使用滑鼠在畫板上繪製元素，以將控制項新增至畫板。

如需詳細資訊，請參閱選擇及使用互動式控制項下所列的使用方法主題。

在 [資產] 面板中按兩下控制項可將其以預設大小插入目前使用的元素中。在大部分情況中，預設大小會設為「自動」，使控制項在新增內容時會正確調整大小，因此此功能相當有用。

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

如需詳細資訊，請參閱新增或修改物件，或使用物件和屬性中所列的使用方法主題。

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

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

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

類別	描述	範例
簡單控制項	簡單控制項由控制項本身與可對其設定的屬性所組成。簡單控制項不包含任何內容。換句話說，這些控制項內不能有子元素。	Image  ScrollBar
內容控制項	內容控制項可包含其他元素 (或在簡單的情況中可將字串顯示為文字)。內容控制項具有 Content 屬性。這表示內容控制項可包含單一內容，例如字串。另外，內容控制項亦可包含其他元素，例如版面配置面板。 如需範例，請參閱主題繪製內容控制項。	CheckBox  RadioButton
項目控制項	項目集合控制項包含子元素的集合。您可手動將項目新增至 Items 集合屬性，也可將資料集合繫結至 ItemsSource 屬性。項目集合控制項會公開項目集合，而且不具 Content 屬性與 Header 屬性。 如需範例，請參閱主題繪製項目控制項。	ComboBox  ListBox
已加上標題的控制項	已加上標題的控制項，包含可標記控制項的標題子元素。已加上標題的控制項可包含內容 (已加上標題的內容控制項) 或項目集合 (已加上標題的項目控制項)。 如需範例，請參閱主題繪製已加上標題的控制項。	TabControl  TabItem MenuItem

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

樣式與範本

如前文所說明，您可以利用許多方式自訂控制項 (包括建立控制項的範本及樣式)，以產生獨特而一致的應用程式外觀。範本及樣式可分別定義控制項的組成部分，以及控制項的行為。由於您無法修改系統樣式及範本，因此只能透過製作控制項之預設系統樣式與範本的複本來建立範本與樣式。只要修改範本及樣式即可在 Expression Blend 的 [設計] 檢視中輕鬆製作新的控制項，並不需要使用程式碼。

如需詳細資訊，請參閱設定支援範本之控制項的樣式。