WPF 簡單樣式的樣式提示

  • 發行項

本頁僅適用 WPF 專案

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

什麼是簡單樣式？

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

建立簡單樣式控制項

在 [資產] 面板中，按一下 [樣式] 類別中的 [簡單樣式]，就可以取得簡單樣式。從 [資產] 面板選取簡單樣式後，[資產] 按鈕 Cc294894.0d8b8d29-1af9-418f-8741-be3097d76eab(zh-tw,Expression.40).png 下方就會顯示簡單樣式的圖示並予以選取，表示可以準備在畫板上繪製。在畫板上繪製簡單樣式之後 (例如 SimpleButton )，就已實際建立系統控制項 (例如 Button ) 的例項，但會套用 SimpleButton 樣式。

顯示可用簡單樣式控制項的資產面板

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

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

簡單樣式 套用的控制項 圖示

SimpleButton

Button

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

SimpleCheckBox

CheckBox

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

SimpleComboBox

ComboBox

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

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

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

SimpleLabel

Label

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

SimpleListBox

ListBox

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

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

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

SimpleMenuItem

MenuItem

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

SimpleProgressBar

ProgressBar

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

SimpleRadioButton

RadioButton

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

SimpleRepeatButton

ListBox 控制項中的 RepeatButton

SimpleScrollBar

ScrollBar

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

SimpleScrollBarRepeatButtonStyle

ScrollBar 控制項中的 RepeatButton

SimpleScrollViewer

ScrollViewer

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

SimpleSeparator

ListBox 、 Menu 或 ToolBar 控制項中的 Separator

SimpleSlider

Slider

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

SimpleSliderThumb

Slider 控制項中的 Thumb

SimpleTabControl

TabControl

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

SimpleTabItem

TabControl 中的 TabItem

SimpleTextBox

TextBox

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

SimpleThumbStyle

ListBox 控制項中 ScrollBar 的 Thumb

SimpleTreeView

TreeView

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

SimpleTreeViewItem

TreeView 控制項中的 TreeViewItem

SimpleTreeViewItemToggleButton

TreeView 控制項中的 ToggleButton

修改簡單樣式

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

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

  • **變更色彩  ** 所有簡單樣式所用的色彩都儲存為可供您變更的資源。

    若要變更其中一個色彩資源，請在 [資源] 面板中按一下色彩資源旁邊的向下箭號按鈕。

    如需有關筆刷的詳細資訊，請參閱設定色彩、筆刷與遮罩。

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

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

  • **變更樣式  ** 您可以在 Expression Blend 中使用控制項的樣式來指定屬性和觸發程序，作為控制項套用此樣式時使用的預設值。屬性 (例如背景筆刷色彩) 會影響控制項的外觀，而觸發程序會影響控制項對於屬性變更與事件的回應方式。例如， SimpleButton 樣式包含 IsMouseOver 屬性的觸發程序，當使用者將滑鼠指標移至控制項時，按鈕的外觀便會變更。此觸發程序會在 IsMouseOver 屬性從 False 變更為 True 時觸發。

    若要變更其中一個簡單樣式，請在 [資源] 面板中按一下簡單樣式旁的 [編輯資源] 按鈕。

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

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

  • **變更控制項範本  ** 控制項的範本經由定義控制項內含的子控制項來定義外觀。例如， SimpleTextBox 物件的控制項範本包含 Grid 物件，該物件又包含 Border 物件，而這個物件包含一個名為 PART_ContentHost 的 ScrollViewer 物件。當 SimpleTextBox 樣式套用到畫板上的 TextBox 時， ScrollViewer 物件就會顯示 TextBox 的內容。就像樣式一樣，您可以在控制項範本中設定屬性和事件觸發程序。

    若要變更簡單樣式的控制項範本，請按一下 [資源] 面板中簡單樣式旁的 [編輯資源] 按鈕，並以滑鼠右鍵按一下 [物件與時間軸] 面板中顯示的 [Style] 元素，指向 [編輯範本]，然後按一下 [編輯目前]。

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

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

    tip note秘訣：

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

如需樣式與範本的比較細節，請參閱設定支援範本之控制項的樣式。

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

簡單樣式是可以像任何其他資源一樣套用與管理的資源。

如需範例，請參閱套用樣式資源。

如需有關資源的詳細資訊，請參閱建立可重複使用的資源。

Copyright © 2011 by Microsoft Corporation. All rights reserved.