共用方式為


樣式及範本概觀

本頁適用於 WPF 和 Silverlight 2

您可以利用許多方式自訂 Windows Presentation Foundation (WPF) 和 Silverlight 2 控制項,包括建立控制項的一組範本及樣式。如此會產生獨特且一致的應用程式外觀。

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

Microsoft Silverlight 1.0 專案不支援樣式及範本,但是您可以建立 JavaScript 類別,以定義可重複使用的控制項。例如,請參閱 [歡迎畫面] (在 [說明] 功能表上) 的 [範例] 索引標籤所提供 [ButtonGallery] 範例中的 Button 類別。如需詳細資訊,請參閱 Silverlight 學習中心 (英文)。

範本及樣式可分別定義控制項的組成部分,以及控制項的行為。您無法修改系統樣式及範本,因此請務必製作控制項的預設系統樣式及範本複本,以便建立範本及樣式。只要修改範本及樣式即可在 Microsoft Expression Blend 的 [設計] 檢視中輕鬆製作新的控制項,並不需要使用程式碼。

樣式及範本之間的差異

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

特性

樣式

範本

用途

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

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

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

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

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

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

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

  • 內容展示框:內容展示框是控制項範本中的預留位置,用來顯示套用範本之控制項的內容。這可能是內容屬性值 (例如,在按鈕中) 或文字屬性 (在文字方塊中)。

  • 標題:部分控制項會有多個屬性,屬性中可保留內容。在此情況下,會將範本中的其他內容展示框,當成標題內容類型的預留位置。已加上標題之控制項的範例包含索引標籤項目控制項,在此控制項中,標題就是索引標籤上的標籤,且內容會顯示在標題的下方。

  • 項目載體:項目載體是當成控制項子元素的預留位置。在 [屬性] 面板中,範本的項目主機部分以 Is_Items_Host = True 表示。

  • ItemContainerTemplate   項目容器範本會套用至包含項目的控制項中,如 [Menu] 或 [List] 控制項。將項目加入至清單時,會使用此範本。

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

Cc295273.alert_note(zh-tw,Expression.10).gif注意事項:
您不可以將範本繫結屬性值或色彩資源值,以動畫效果顯示為另一個值。在觸發程序中使用動畫時,請使用特定的屬性值。

如何編輯

您可以透過下列方式進入樣式的編輯模式:

使用功能表

  1. 在 [物件與時間軸] 之下,選取控制項。

  2. 在 [物件] 功能表上,指向 [編輯樣式]。

  3. 執行下列其中一項動作:

    • 按一下 [編輯樣式] (如果想要變更目前套用至控制項的樣式)

    • 按一下 [編輯複本] (以同時建立目前套用至控制項的樣式新複本,並將該新樣式套用至控制項)。

如果控制項已套用系統樣式,就無法使用 [編輯樣式] 選項。例如,請參閱建立樣式資源

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

Cc295273.alert_note(zh-tw,Expression.10).gif注意事項:
樣式及範本都是資源,可以用不同方式套用至控制項,以及儲存在應用程式中的不同位置。如需建立樣式的範例,請參閱建立樣式資源

您可以透過下列方式進入控制項範本的編輯模式:

使用功能表

  1. 在 [物件與時間軸] 之下,選取控制項。

  2. 執行下列其中一項動作:

    • 在 [物件] 功能表上,指向 [編輯控制項組件 (範本)]。

    • 以滑鼠右鍵按一下控制項,並指向 [編輯控制項組件 (範本)]。

  3. 按一下 [編輯範本] (如果想要修改目前套用至控制項的範本) 或按一下 [編輯複本] (以同時建立目前套用至控制項的新範本複本,並將該新範本套用至控制項)。如果控制項已套用系統範本,就無法使用 [編輯範本] 選項。例如,請參閱建立或編輯控制項範本

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

  1. 在 [資源] 面板中,找到含有該範本的樣式,然後按一下樣式旁的 [編輯資源] 按鈕。

  2. 在 [物件與時間軸] 之下,以滑鼠右鍵按一下 [Style] 元素,並指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

Cc295273.alert_tip(zh-tw,Expression.10).gif秘訣:
控制項範本是包裝在樣式內,因此套用至控制項的樣式,會同時包括控制項的外觀 (組件) 及行為。由於樣式複本包括範本,因此才會按一下 [編輯範本],而不是 [編輯複本]。由於按一下按鈕,只會將您帶回樣式的編輯模式,因此若要回到主文件的編輯範圍,則必須按兩次 [選定範圍] Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.10).png 按鈕。
Cc295273.alert_note(zh-tw,Expression.10).gif注意事項:
樣式及範本都是資源,可以用不同方式套用至控制項,以及儲存在應用程式中的不同位置。如需建立範本的範例,請參閱建立或編輯控制項範本

如何套用

您可以透過下列方式將現有樣式套用至畫板上的控制項:

使用功能表

  1. 在 [物件與時間軸] 之下,選取控制項。

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

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

  1. 開啟 [資產庫] Cc295273.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png

  2. 執行下列其中一項動作:

    • 如果您在使用的文件中建立樣式,請按一下 [本機樣式] 索引標籤。

    • 如果是在是資源字典 (僅限 WPF) 中建立樣式,請按一下 [控制項] 索引標籤,然後選取該字典。

  3. 選取想要的樣式,然後在畫板上進行繪製。

您可以透過下列方式,將現有範本套用至畫板上的控制項:

使用功能表

  1. 在 [物件與時間軸] 之下,選取控制項。

  2. 執行下列其中一項動作:

    • 在 [物件] 功能表上,指向 [編輯控制項組件 (範本)]。

    • 以滑鼠右鍵按一下控制項,然後指向 [編輯控制項組件 (範本)]。

  3. 按一下 [編輯範本] (如果想要變更目前套用至控制項的範本) 或按一下 [編輯複本] (以便同時建立目前套用至控制項的新範本複本,並將該新範本套用至控制項)。如果控制項已套用系統範本,就無法使用 [編輯範本] 選項。例如,請參閱建立或編輯控制項範本

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

  1. 在 [資源] 面板中,找到含有該範本的樣式,然後按一下樣式旁的 [編輯資源] 按鈕。

  2. 在 [物件與時間軸] 之下,以滑鼠右鍵按一下 [Style] 元素,並指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

    由於按一下按鈕,只會將您帶回樣式的編輯模式,因此若要回到主文件的編輯範圍,則必須按兩次 [選定範圍] Cc295273.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.10).png 按鈕。

Expression Blend 包含在 WPF 專案的資源字典中所內含的一組簡單樣式及範本。您可以使用資源字典設計應用程式的主題。如需詳細資訊,請參閱簡單樣式和資源字典一節。

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

修改樣式及範本

當您位於 Expression Blend 2 中某個樣式或範本的編輯範圍時,階層連結導覽列會出現在畫板的左上方。

已選取範本編輯模式的階層連結列

Cc295273.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(zh-tw,Expression.10).png

您可以按一下階層連結列上的按鈕,快速在範本編輯模式、樣式編輯模式及選取物件的物件編輯範圍之間移動。任何套用自訂樣式或範本的所選物件,都會出現階層連結列。

如需有關如何修改樣式或範本的詳細資訊,請參閱編輯樣式建立或編輯控制項範本。當您修改樣式或範本時,請確定採用下列的最佳作法。

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

最佳作法

Cc295273.alert_caution(zh-tw,Expression.10).gif警告:

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

  • 除非只是變更色彩筆刷,否則請避免變更現有的觸發程序。

  • 請勿重新命名或修改任何名稱開頭為 "PART_" 的元素,因為執行控制項的程式碼會參照這些元素。

  • 請勿移除任何協助程式元素,例如 [SimpleTabControl] 中的 [TabPanel],或 [SimpleScrollBar] 中的 [Track]。這些元素必須存在,才能保留控制項的功能。

  • 請勿在 [屬性] 面板中重設或變更任何繫結。這些繫結會以屬性周圍的黃色反白顯示,或以黃色的 [進階屬性選項] Cc295273.41b6d73e-9be5-48d9-aebf-12a284314457(zh-tw,Expression.10).png 按鈕來表示。可使用範本繫結,將範本中的屬性繫結至套用範本控制項的屬性。

  • 如果範本包含展示框元素 (例如 [ContentPresenter] 或 [ItemsPresenter] 元素),請務必在範本中保留此元素。展示框元素會顯示套用範本之控制項中定義的內容。

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

佈景主題

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

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

  1. 控制項上設定的屬性:例如,如果您在 Expression Blend 中建立按鈕,然後直接在按鈕上變更背景色彩。如果直接在控制項上設定屬性,將會覆寫該屬性在其他位置設定的任意值。

  2. 控制項所用之自訂樣式或範本中設定的屬性:例如,如果您在 Expression Blend 中建立按鈕,然後修改範本複本以在範本中設定背景色彩。如果按鈕上未直接設定背景屬性,此背景色彩就是按鈕使用的背景色彩。您可以定義含有控制項之文件中的資源,也可以在應用程式層級定義資源 (讓資源適用於應用程式中的所有文件)。而文件層級資源會覆寫應用程式層級資源。

  3. 控制項所用之系統範本上設定的屬性:WPF 會根據主題決定系統範本 (換句話說,就是根據作業系統來決定系統範本)。

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

簡單樣式和資源字典

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

Silverlight 2 專案不支援簡單樣式和資源字典。

您可以在名為資源字典的個別檔案中建立屬性、樣式及範本資源,有效地建立主題。資源字典可讓您跨多個應用程式重複使用主題。您也可定義提供相同類型的資源但具不同值的多個資源字典,建立可切換的主題。例如,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 檔案,這樣一來,樣式就會定義在應用程式的範圍中。您可以在 [資源] 面板中檢視所有的樣式。

如需使用簡單樣式的範例,請參閱簡單樣式下的主題。如需有關如何管理資源的詳細資訊,請參閱資源概觀

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