內容 索引 搜尋
 

控制項概觀

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

什麼是控制項？

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

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

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

控制項類別

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

所有控制項都在資產庫中，請按一下工具箱底端的 [資產庫] 按鈕 [資產庫] 按鈕。[工具箱] 位於 Expression Blend 的左側。從 [資產庫] 選取 UI 元素時，該元素的圖示會出現在 [資產庫] 按鈕上方，讓您之後再次選取元素時比較方便。最常用的 UI 元素已顯示於 [資產庫] 按鈕上方，讓您可迅速找到這些 UI 元素。

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

從 [工具箱] 到畫板

從 [工具箱] 到畫板。

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

類別 使用 範例
圖形 藉由使用橢圓形、線條及矩形來建立豐富的視覺元素，您可讓它們的外觀如您所想要的一樣簡單，或一樣複雜而色彩豐富。如需詳細資訊，請參閱本使用者指南中的繪圖的基本資訊。

您可在 Expression Blend 中使用 [屬性] 面板或者只使用樣式 (而不使用範本)，自訂這些元素的外觀與行為。如需詳細資訊，請參閱本使用者指南中的編輯樣式。
  • 矩形 [矩形] 工具
  • 橢圓形 [橢圓形] 工具
  • 路徑 (由 [線條] [線條] 工具、[畫筆] [畫筆] 工具 及 [鉛筆] [鉛筆] 工具 繪圖工具所產生)
版面配置面板 作為其他 UI 元素的容器，用來指定其位置與視窗調整大小行為。

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

如需詳細資訊，請參閱本使用者指南中的版面配置系統。

您可在 Expression Blend 中使用 [屬性] 面板或使用樣式 (不使用範本)，自訂這些元素的外觀與行為。如需詳細資訊，請參閱本使用者指南中的編輯樣式。
  • [畫布] 面板 [畫布] 面板
  • [固定] 面板 [固定] 面板
  • [格線] 面板[格線] 面板
  • [堆疊] 面板 [堆疊] 面板
  • [換行] 面板 [換行] 面板
文件/文字 用來定義文件呈現方式與文字格式設定。如需詳細資訊，請參閱本使用者指南中的文字概觀。

您可在 Expression Blend 中使用 [屬性] 面板或使用樣式與範本，自訂這些元素的外觀與行為。如需詳細資訊，請參閱本使用者指南中的編輯控制項範本及編輯樣式。
  • TextBox TextBox 控制項
  • TextBlock TextBlock 控制項
  • RichTextBox RichTextBox 控制項
  • Label Label 控制項
  • PasswordBox PasswordBox 控制項
控制項 用來提供使用者與應用程式互動的方式。

您可在 Expression Blend 中使用 [屬性] 面板或使用樣式與範本，自訂這些元素的外觀與行為。如需詳細資訊，請參閱本使用者指南中的編輯控制項範本及編輯樣式。
  • Button 控制項 Button 控制項
  • ListBox 控制項 ListBox 控制項
  • Menu 控制項 Menu 控制項
  • RadioButton 控制項 RadioButton 控制項
  • CheckBox 控制項 CheckBox 控制項
裝飾項目 用來套用效果至其他元素。裝飾項目可包含一個子元素，通常是受裝飾項目影響外觀的元素。

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

如需這些控制項類型特性的詳細資訊，請參閱 MSDN 之＜Windows Presentation Foundation＞一節的＜類型家族＞(英文) 主題。

建立及修改控制項

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

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

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

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

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

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

如需這些控制項類型特性的詳細資訊，請參閱 MSDN 之＜Windows Presentation Foundation＞一節的＜內容模型＞(英文) 主題。

樣式與範本

先前在什麼是控制項？中提及，您可以利用許多方式自訂控制項 (包括建立控制項的範本及樣式)，以便產生獨特且一致的應用程式外觀。範本及樣式可分別定義控制項的組成部分，以及控制項的行為。因為您無法修改系統樣式及範本，所以請務必製作控制項的預設系統樣式及範本複本，以便建立範本及樣式。只要修改範本及樣式即可在 Expression Blend [設計] 檢視中輕鬆製作新的控制項，並不需要使用程式碼。

下表提供樣式與範本的詳細比較，協助您決定是否要修改控制項的樣式或範本，或是同時修改兩者。

特性 樣式 範本
用途

您可以使用樣式，修改套用樣式控制項上所設定的屬性預設值。例如，您可以指定控制項 (如按鈕) 背景、框線及前景的預設色彩。

在畫板上繪製控制項時，於該控制項上設定的值可以覆寫這些樣式屬性。例如，如果將按鈕樣式的背景色彩設定為藍色，則在畫板上繪製按鈕時，按鈕會顯示為藍色，但是您可以變更此色彩。

您只能設定樣式中已存在的屬性。例如，如果屬性是屬於新增至範本的新組件，就無法設定該屬性的預設值。

最後，您可以使用樣式來指定控制項的預設行為。例如，在按鈕的樣式中，您可以指定「觸發程序」，在使用者將他們的滑鼠指標移至該按鈕上方時變更背景色彩。這些屬性變更是瞬間的，而不是逐漸地以動畫效果呈現。

您可以使用範本，修改控制項 (已套用範本) 的結構。您可以修改控制項範本，以重新排列、新增或刪除控制項內的元素 (或組件)。例如，您可以新增控制項 (如按鈕) 的背景影像或設計。

您也可以修改套用範本之控制項上所設定的屬性值 (如背景色彩)。在畫板上繪製控制項時，於該控制項上設定的值無法覆寫這些範本值。不過，在畫板上繪製控制項時，您可以使用「範本繫結」以根據控制項的屬性值來設定範本的屬性。

修改範本時，可存取的控制項組件數目，會比修改樣式時可存取的控制項組件數目還要多。例如，您可以變更下拉式方塊中快顯清單的顯示方式，或修改「項目範本」，以變更會觸發下拉式方塊中快顯清單之按鈕的外觀。有些範本是由下列組件所構成：

  • 內容展示框   內容展示框是控制項範本中的預留位置，用來顯示套用範本之控制項的內容。這可能是內容屬性值 (例如，在按鈕中) 或文字屬性 (在文字方塊中)。
  • 標題   部分控制項會有多個屬性，屬性中可保留內容。在此情況下，會將範本中的其他內容展示框，當成標題內容類型的預留位置。已加上標題之控制項的範例，就是索引標籤項目集合控制項，在此控制項中，標題就是索引標籤上的標籤，且內容會顯示在標題的下方。
  • 項目載體   項目載體是當成控制項子元素的預留位置。在 [屬性] 面板中，範本的項目載體部分是以 Is_Items_Host = True 表示。
  • ItemContainerTemplate   項目容器是項目集合控制項 (如功能表或清單方塊) 之控制項範本內的子範本。它提供了將項目新增至清單時用來建立每個項目的範本。

最後，您可以使用觸發程序，指定範本內任何新及現有部分的行為。例如，您可以指定觸發程序，在使用者將他們的滑鼠指標移至按鈕上方時變更其中一個部分的色彩。這些屬性變更可以是瞬間或是以動畫效果呈現，以產生平滑切換。

附註 您不可以將範本繫結屬性值或色彩資源值，以動畫效果顯示為另一個值。在觸發程序中使用動畫時，請使用特定屬性值。
如何編輯 您可以透過下列方式進入樣式的編輯模式：

使用功能表

  1. 在 [物件與時間軸] 之下，選取控制項。
  2. 在 [物件] 功能表上，指向 [編輯樣式]。
  3. 執行下列其中一項動作：
    • 按一下 [編輯樣式] (如果想要編輯目前套用至控制項的樣式)
    • 按一下 [編輯複本] (以便同時建立目前套用至控制項的新樣式複本，並將新樣式套用至控制項)。
    如果控制項已套用系統樣式，就無法使用 [編輯樣式] 選項。
    如需範例，請參閱建立樣式資源。

使用資源面板 (以修改現有樣式)

  • 在 [資源] 面板中，按照名稱找到樣式，然後按一下樣式旁邊的 [編輯資源] 按鈕。
附註 樣式及範本都是「資源」，可以用不同方式套用至控制項，以及儲存在應用程式中的不同位置。如需建立樣式的範例，請參閱建立樣式資源。
您可以透過下列方式進入控制項範本的編輯模式：

使用功能表

  1. 在 [物件與時間軸] 之下，選取控制項。
  2. 執行下列其中一項動作：
    • 在 [物件] 功能表上，指向 [編輯控制項組件 (範本)]。
    • 以滑鼠右鍵按一下控制項，並指向 [編輯控制項組件 (範本)]。
  3. 按一下 [編輯範本] (如果想要編輯目前套用至控制項的範本) 或按一下 [編輯複本] (以便同時建立目前套用至控制項的新範本複本，並將新範本套用至控制項)。如果控制項已套用系統範本，則無法使用 [編輯範本] 選項。
    如需範例，請參閱編輯控制項範本。

使用資源面板 (以修改現有範本)

  1. 在 [資源] 面板中，找到含有該範本的樣式，然後按一下樣式旁邊的 [編輯資源] 按鈕。
  2. 在 [物件與時間軸] 之下，以滑鼠右鍵按一下 Style 元素，並指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。
    提示 控制項範本是包裝在樣式內，因此套用至控制項的樣式，會同時包括控制項的外觀 (組件) 及行為。因為樣式複本包括範本，所以才會按一下 [編輯範本]，而不是 [編輯複本]。
    因為按一下按鈕，只會將您帶回樣式的編輯模式，若要回到主文件的編輯範圍，則需要按兩次 [選定範圍] [選定範圍] 按鈕 按鈕。
附註 樣式及範本都是「資源」，可以用不同方式套用至控制項，以及儲存在應用程式中的不同位置。如需建立範本的範例，請參閱編輯控制項範本。
如何套用 您可以透過下列方式將現有樣式套用至畫板上的控制項：

使用功能表

  1. 在 [物件與時間軸] 之下，選取控制項。
  2. 在 [物件] 功能表上，依序指向 [編輯樣式] 及 [套用資源]，然後從出現的下拉式清單中選取樣式。
    下拉式清單只會顯示所選取的控制項可用的樣式。例如，您不可以將文字方塊樣式套用至按鈕。

使用資產庫在畫板上繪製具有樣式的控制項

  1. 開啟 [資產庫] [資產庫] 按鈕。
  2. 執行下列其中一項動作：
    • 如果您在使用的文件中建立樣式，請按一下 [本機樣式] 索引標籤。
    • 如果是在是「資源字典」中建立樣式，請按一下 [控制項] 索引標籤，然後選取該字典。
  3. 選取想要的樣式，然後在畫板上進行繪製。
 您可以透過下列方式，將現有範本套用至畫板上的控制項：

使用功能表

  1. 在 [物件與時間軸] 之下，選取控制項。
  2. 執行下列其中一項動作：
    • 在 [物件] 功能表上，指向 [編輯控制項組件 (範本)]。
    • 以滑鼠右鍵按一下控制項，並指向 [編輯控制項組件 (範本)]。
  3. 按一下 [編輯範本] (如果想要編輯目前套用至控制項的範本) 或按一下 [編輯複本] (以便同時建立目前套用至控制項的新範本複本，並將新範本套用至控制項)。如果控制項已套用系統範本，則無法使用 [編輯範本] 選項。
    如需範例，請參閱編輯控制項範本。

使用資源面板 (以修改現有範本)

  1. 在 [資源] 面板中，找到含有該範本的樣式，然後按一下樣式旁邊的 [編輯資源] 按鈕。
  2. 在 [物件與時間軸] 之下，以滑鼠右鍵按一下 Style 元素，並指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。
    因為按一下按鈕，只會將您帶回樣式的編輯模式，若要回到主文件的編輯範圍，則需要按兩次 [選定範圍] [選定範圍] 按鈕 按鈕。

Expression Blend 附有在資源字典中封裝的一組簡單樣式 (Simple Styles) 及範本。資源字典可以用來設計應用程式的主題。如需詳細資訊，請參閱下面的主題及簡單樣式 (Simple Styles)。

警告

在修改樣式及範本時，為了不破壞套用樣式或範本之系統控制項的功能，需要注意幾個重點：

  • 除非只是變更色彩筆刷，否則請避免變更現有的觸發程序。
  • 因為實作控制項的程式碼會參照這些元素，請勿重新命名或修改任何名稱開頭為 "PART_" 的元素。
  • 請勿移除任何協助程式元素，例如 SimpleTabControl 中的 TabPanel，或 SimpleScrollBar 中的 Track。這些元素必須存在，才能保留控制項的功能。
  • 請勿在 [屬性] 面板中重設或變更任何繫結。這些繫結會以屬性周圍的黃色反白顯示，或以黃色的 [進階屬性選項] 按鈕來表示。可使用範本繫結，將範本中的屬性繫結至套用範本控制項的屬性。
  • 如果範本包含「展示框」元素 (例如 ContentPresenter 或 ItemsPresenter 元素)，請務必在範本中保留此元素。展示框元素會顯示套用範本之控制項中定義的內容。

主題及簡單樣式 (Simple Styles)

主題是產生使用者介面控制項一致外觀的一組樣式及範本。例如，Windows Presentation Foundation (WPF) 會將某個主題用於在 Windows XP® 上執行的 WPF 應用程式，而將另一個主題用於在 Windows Vista™ 上執行的 WPF 應用程式。這就是這兩個作業系統上的相同按鈕外觀不同的原因。

為了決定控制項 (如按鈕) 的外觀，應用程式會搜尋下列位置：

  1. 控制項上設定的屬性  —  例如，如果您是在 Expression Blend 中建立按鈕，然後直接在按鈕上變更背景色彩。如果直接在控制項上設定屬性，將會覆寫該屬性在其他位置設定的任意值。
  2. 控制項所用自訂樣式或範本中設定的屬性  — 例如，如果您是在 Expression Blend 中建立按鈕，然後編輯範本複本以在範本中設定背景色彩。如果按鈕上未直接設定背景屬性，此背景色彩就是按鈕使用的背景色彩。您可以定義含有控制項之文件內的資源，也可以在應用程式層級定義資源 (讓資源適用於應用程式中的所有文件)。而文件層級資源會覆寫應用程式層級資源。
  3. 控制項所用系統範本上設定的屬性 —    WPF 會根據主題來決定系統範本 (換句話說，就是根據作業系統來決定系統範本)。

您可以在稱為「資源字典」的個別檔案中建立屬性、樣式及範本資源，有效地建立主題。使用資源字典可讓您跨多個應用程式重複使用主題。您也可定義提供相同類型的資源但具不同值的多個資源字典，建立可切換的主題。例如，Expression Blend 應用程式本身會將不同的資源字典用於「陰暗」主題及「明亮」主題，而切換方式是按一下 [工具] 功能表上的 [選項]，然後變更 [工作區] 的 [主題]。

如果是您自己的應用程式，則 Expression Blend 會提供名稱為 SimpleStyles.xaml 的已可使用資源字典，內含通用控制項 (如按鈕、清單方塊及其他項目) 適用的一組樣式。您可以在 [資產庫] 之 [控制項] 索引標籤的 [Simple Styles] 之下存取這些樣式。當您使用其中一個簡單樣式 (Simple Styles) 在畫板上繪製控制項時，會同時建立控制項的系統版本，並套用簡單樣式 (Simple Styles)。例如，如果在畫板上建立系統 Button，則所產生的可延伸應用程式標記語言 (XAML) 如下：

<Button Content="Button" ... />

如果在畫板上建立 SimpleButton，則產生的 XAML 會包括 SimpleButton 樣式的參照：

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

將簡單樣式 (Simple Styles) 控制項新增至畫板之後，SimpleStyles.xaml 資源字典檔案就會新增至專案中，並連結至 app.xaml 檔案，這樣一來，樣式就會定義在應用程式的範圍中。您可以在 [資源] 面板中檢視所有的樣式。如需使用簡單樣式 (Simple Styles) 的範例，請參閱本使用者指南中簡單樣式 (Simple Styles) 下的主題。如需管理資源的詳細資訊，請參閱本使用者指南中的資源的基本資訊。