使用簡單樣式

本頁僅適用 WPF 專案

Microsoft Expression Blend 不僅可讓您利用預設控制項或系統控制項設計應用程式的使用者介面 (UI),還可讓您依個人喜好實際自訂及設計控制項。只要使用 Expression Blend 中的資源,就能讓控制項呈現既獨特又具吸引力的外觀。您可以建立別具特色的應用程式,打造深刻的品牌印象,或是讓所有應用程式擁有一致的 UI。

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

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

什麼是簡單樣式?

簡單樣式是針對一組常用的系統控制項 (例如 Button 和 ListBox 控制項) 所建立的自訂、立即可用的樣式資源。在修改系統控制項樣式時,若不具備 Windows Presentation Foundation (WPF) 樣式與範本方面的知識,極可能破壞控制項的功能。有鑑於此,Expression Blend 特別提供了簡單樣式 (Simple Styles) 資源。在 Expression Blend 中,您可以將簡單樣式當作一組獨立的資源來使用,不必事先研究 WPF 樣式與範本,就能快速修改這組資源,為應用程式建立獨特的外觀。

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

建立簡單樣式控制項

在 [資產庫] 中,按一下 [控制項] 索引標籤上的 [Simple Styles] 就可以取得簡單樣式。選取 [全部顯示] 核取方塊來檢視所有可用的簡單樣式。從 [資產庫] 中選取簡單樣式之後,[資產庫] 按鈕 Cc294894.0224cabd-5da1-4e01-bddd-4a647401a098(zh-tw,Expression.10).png 上方就會顯示此簡單樣式 (Simple Styles) 的圖示並予以選取,表示可以準備在畫板上繪製。在畫板上繪製簡單樣式之後 (例如 SimpleButton),就已實際建立系統控制項 (例如 Button) 的例項,但會套用 SimpleButton 樣式。

如果要將簡單樣式套用至 [工具箱] 下拉式清單中可用的工具,在已選取 [控制項] 索引標籤上的 [Simple Styles] 時,您可以在 [資產庫] 中按一下 [作為預設值] 按鈕。

[資產庫] 會顯示可用的簡單樣式控制項及用來設為預設樣式的選項

Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(zh-tw,Expression.10).png

下表列出可用的簡單樣式及套用的控制項。

簡單樣式

套用的控制項

圖示

SimpleButton

按鈕

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

SimpleCheckBox

CheckBox

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

SimpleComboBox

ComboBox

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

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(zh-tw,Expression.10).png

SimpleLabel

Label

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

SimpleListBox

ListBox

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

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

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

SimpleMenuItem

MenuItem

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

SimpleProgressBar

ProgressBar

Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(zh-tw,Expression.10).png

SimpleRadioButton

RadioButton

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

SimpleRepeatButton

ListBox 控制項中的 RepeatButton

SimpleScrollBar

ScrollBar

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

SimpleScrollBarRepeatButtonStyle

ScrollBar 控制項中的 RepeatButton

SimpleScrollViewer

ScrollViewer

Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(zh-tw,Expression.10).png

SimpleSeparator

ListBox、Menu 或 ToolBar 控制項中的分隔符號

SimpleSlider

Slider

Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(zh-tw,Expression.10).png

SimpleSliderThumb

Slider 控制項中的 Thumb

SimpleTabControl

TabControl

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

SimpleTabItem

TabControl 中的 TabItem

SimpleTextBox

TextBox

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

SimpleThumbStyle

ListBox 控制項中的 ScrollBar 的 Thumb

SimpleTreeView

TreeView

Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(zh-tw,Expression.10).png

SimpleTreeViewItem

TreeView 控制項中的 TreeViewItem

SimpleTreeViewItemToggleButton

TreeView 控制項中的 ToggleButton

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

修改簡單樣式

簡單樣式資源都放在一個名為 SimpleStyles.xaml 的資源字典中。當您將 [工具箱] 中的簡單樣式 (Simple Styles) 新增至畫板之後,SimpleStyles.xaml 資源字典就會新增至您的專案中,而且 [資源] 面板中會顯示所有的簡單樣式 (Simple Styles) 資源。

SimpleStyles.xaml 資源字典包含簡單樣式所用的筆刷資源及其他範本。您可以對簡單樣式做下列變更:

  • **變更色彩  ** 所有簡單樣式所用的色彩都儲存為可供您變更的資源。若要變更其中一個色彩資源,請在 [資源] 面板中按一下色彩資源旁邊的向下箭號按鈕。如需有關筆刷的詳細資訊,請參閱外觀概觀

    在 [資源] 面板中選擇編輯筆刷資源

    Cc294894.64136c65-52bc-4225-a948-b1171634baca(zh-tw,Expression.10).png

  • **變更樣式  ** 您可以在 Expression Blend 中使用控制項的樣式來指定屬性和觸發程序,作為控制項套用此樣式時使用的預設值。屬性 (例如背景筆刷色彩) 會影響控制項的外觀,而觸發程序會影響控制項對於屬性變更與事件的回應方式。例如,SimpleButton 樣式包含 IsMouseOver 屬性的觸發程序,當使用者將滑鼠指標移至控制項時,按鈕的外觀便會變更。當 IsMouseOver property 從 False 變成 True 時會引發觸發程序。若要變更其中一個簡單樣式,請在 [資源] 面板中按一下簡單樣式旁的 [編輯資源] 按鈕。

    在 [資源] 面板中選擇編輯樣式資源

    Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(zh-tw,Expression.10).png

  • **變更控制項範本  ** 控制項的範本經由定義控制項內含的子控制項來定義外觀。例如,SimpleTextBox 元素的控制項範本包含 Grid 元素,後者又包含 Border 元素,更裡面又包含名為 PART_ContentHost 的 ScrollViewer 元素。當 SimpleTextBox 樣式套用至畫板上的 TextBox 時,ScrollViewer 元素會顯示 TextBox 的內容。就和樣式一樣,您也可以在控制項範本中設定屬性和事件觸發程序。若要變更簡單樣式的控制項範本,請在 [資源] 面板中按一下簡單樣式旁的 [編輯資源] 按鈕、以滑鼠右鍵按一下 [物件與時間軸] 下顯示的 [樣式] 元素、指向 [編輯控制項組件 (範本)],然後按一下 [編輯範本]。

    從樣式的編輯範圍開始時選擇編輯控制項範本

    Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(zh-tw,Expression.10).png

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

    控制項範本是包裝在樣式內,因此套用至控制項的樣式,會同時包括控制項的外觀 (組件) 及行為。在選擇 [編輯複本] 或 [編輯範本] 時必須牢記這一點。

如需樣式與範本的比較細節,請參閱樣式與範本。如需簡單樣式的特定資訊及修改簡單樣式和控制項範本方面的範例,請參閱簡單樣式中的「參照」和「試試看!」所列出的主題。

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

將樣式資源套用至畫板上現有的控制項

簡單樣式是可以像任何其他資源一樣套用與管理的資源。如需範例,請參閱本使用者指南中的套用樣式資源。如需有關資源的詳細資訊,請參閱本使用者指南中的資源概觀

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