建立或編輯控制項範本

本頁適用於 WPF 和 Silverlight 2

Microsoft Expression Blend 2 專案中的控制項範本會以定義控制項內含子控制項的方式來定義其外觀。例如,[TextBox] 的控制項範本包含名為 [Bd] 的 Border 元素,而此 Border 元素又包含名為 [PART_ContentHost] 的 [ScrollViewer] 元素。當控制項範本套用到畫板上的 [TextBox] 時,[ScrollViewer] 元素就會顯示 [TextBox] 的內容。

編輯 TextBox 控制項的範本

Cc294908.5b3d19c3-460f-4cd1-8a35-262f8b3005b1(zh-tw,Expression.10).png

預設的控制項範本使用的動態主題會視應用程式是在 Microsoft Windows XP 電腦或 Windows Vista 電腦上執行,以變更控制項的外觀。您可修改控制項範本內的元素 (控制項組件) 來重新排列元素或拖曳更多的元素到控制項中。不過,如果修改系統控制項的範本,則控制項在 Windows XP 和 Windows Vista 上的外觀會相同。如需詳細資訊,請參閱樣式及範本概觀中的<主題與簡單樣式>一節。

控制項範本是儲存為可套用至同類型之其他控制項的樣式資源

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

您可以在控制項範本中設定會回應屬性變更的觸發程序 (例如 IsMouseOver)。例如,您可以為 TextBox 建立在滑鼠指標移至其上方時變更背景色彩的「屬性觸發程序」。

若要以變更屬性或啟動動畫的方式建立可以回應事件的事件觸發程序,則必須在樣式中加以建立。如需詳細資訊,請參閱編輯樣式

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

變更控制項範本可能會破壞控制項的功能。另一種編輯系統控制項的控制項範本之作法,是使用預先設定樣式的簡單控制項,這種控制項可讓您在範本設計上享有完全的自由。如需詳細資訊,請參閱使用簡單樣式

如果您因為沒有符合需求的簡單樣式,而要修改系統控制項範本,請謹記下列注意事項:

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

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

  • 請勿在 [屬性] 面板中重設或變更任何繫結。這些繫結會以屬性周圍的黃色反白顯示或以黃色的 [進階屬性選項] 按鈕來表示。

  • 如果範本包含 ContentPresenter 或 Presenter 元素 (例如 ContentPresenter 或 ItemsPresenter 元素),請務必在範本中保留該元素。Presenter 元素會顯示使用範本之控制項中所定義的內容。

建立控制項範本

  1. 在 [物件與時間軸] 下或在畫板上,選取要建立之控制項範本的來源物件,並執行下列一項動作:

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

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

  2. 指向 [編輯範本],然後執行下列一項動作:

    • 若要建立新的空白範本,請按一下 [建立空白]。

    • 若要根據已選取的元素目前所使用的範本 (不管是物件的預設範本或是先前建立的自訂範本) 建立新範本,請按一下 [編輯複本]。

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

      如果已經啟用 [編輯範本] 選項,則會將範本套用至此物件。您可以選擇是否要編輯此範本。

    [建立樣式資源] 對話方塊會隨即顯示。這是因為控制項範本是儲存於樣式資源中。

  3. 在 [資源名稱 (索引碼)] 下,執行下列一項動作:

    • 若要為元素建立新的具名樣式,請輸入索引碼名稱。這是其他元素參照樣式以套用範本所憑藉的名稱。

    • 若要建立此類型之所有元素所用的樣式,請選取 [全部套用]。

      Cc294908.alert_tip(zh-tw,Expression.10).gif秘訣:

      在即將建立之樣式元素的 XAML 中,名為 TargetType 的屬性會設為您要建立樣式之元素的類型。若輸入索引碼名稱 (上面第一個選項),才會設定 x:Key 屬性。x:Key 屬性的存在只允許樣式套用至以索引碼名稱指定樣式的元素。若無 x:Key 屬性,則樣式可套用至此類型的所有元素。例如,下列樣式元素不會套用至畫板上的所有按鈕。

      <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

  4. 在 [定義於] 之下,選取要用以定義樣式的選項:

    • 若要使樣式可供應用程式中的任何文件使用,請選取 [應用程式]。

    • 若只要讓目前的文件使用樣式,請選取 [此文件 (Window: Window)]。

    • 若要在可於其他專案中重複使用的資源字典檔中定義樣式,請選取 [資源字典]。您可以接著選取現有的資源字典檔或建立「新的」資源字典檔。

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

      Silverlight 2 不支援資源字典。

  5. 按一下 [確定],結束對話方塊並開啟樣式以進行編輯。

    Cc294908.alert_tip(zh-tw,Expression.10).gif秘訣:

    您可以在樣式內有效地建立新的範本資源。此資源會成為本機資源,而且可以使用 [資源] 面板輕易加以檢視與修改。

  6. 請注意,新的 Expression Blend 2 階層連結列位於畫板頂端。

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

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

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

  7. 在 [互動] 面板中新增或重新排列子元素或新增屬性觸發程序來修改範本。若要修改系統控制項的範本,請依循上述注意事項來進行。

  8. 若要結束樣式的編輯範圍,請按一下 [物件與時間軸] 下的 [選定範圍] 按鈕 Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.10).png。這會讓您回到文件的編輯範圍。

    Cc294908.alert_tip(zh-tw,Expression.10).gif秘訣:

    請注意,一旦建立樣式資源或將其套用至物件,[屬性] 面板中所選物件的 Style 屬性就會以綠色反白顯示,指出物件已繫結 (或連結) 至此樣式資源。

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

編輯畫板上繪製之物件的範本

  • 在畫板或在 [物件與時間軸] 下,按一下物件加以選取,然後執行下列一項動作:

    • 在 [物件] 功能表中,指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

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

    • 在 [屬性] 面板中,按一下 [Style] 屬性 (先前已套用樣式至此元素,所以應該會以綠色反白顯示),然後按一下快顯功能表中的 [編輯資源]。進入樣式的編輯範圍之後,以滑鼠右鍵按一下 [物件與時間軸] 下的 [Style] 物件,指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

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

    如果已經停用 [編輯範本] 選項,則不會將範本套用至此物件。

    Microsoft Expression Blend 會進入範本的編輯範圍。

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

編輯範本資源

  • 在 [資源] 面板中,找出資源名稱,然後按一下名稱旁的 [編輯資源] 按鈕。

    Expression Blend 會進入範本的編輯範圍。

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

修改範本

  1. 當位在範本的編輯範圍中時,在 [互動] 面板中新增屬性觸發程序,或將子元素新增至範本。若要修改系統控制項的範本,請依循上述注意事項來進行。

  2. 若要結束範本的編輯範圍,請按一下 [物件與時間軸] 下的 [選定範圍] 按鈕 Cc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.10).png

    這會讓您回到文件的編輯範圍。

    Cc294908.alert_tip(zh-tw,Expression.10).gif秘訣:

    請注意,一旦建立範本資源或將其套用至物件,綠色反白顯示就會出現在所選物件之 Style 屬性的 [屬性] 面板中,指出物件現已繫結 (或連結) 至此樣式資源。

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

請參閱

概念

使用簡單樣式

試試看:使用點陣圖效果建立按鈕