WPF中的各類控制元件元素,都可以自由的設定其樣式。 諸如:

• 字型(FontFamily)
• 字型大小(FontSize)
• 背景顏色(Background)
• 字型顏色(Foreground)
• 邊距(Margin)
• 水平位置(HorizontalAlignment)
• 垂直位置(VerticalAlignment) 等等。

而樣式則是組織和重用以上的重要工具。不是使用重複的標記填充XAML,通過Styles建立一系列封裝所有這些細節的樣式。然後通過Style屬性應用封裝好的樣式。這點類似於CSS樣式。然而,WPF樣式的功能更加強大,如控制元件的行為。WPF的樣式還支援觸發器(後面章節會講到)。

示例

為了能夠直觀瞭解到樣式(Style)的使用方法,下面演示一個從傳統的定義控制元件樣式到使用Style組織樣式的方法。

下面的例子中,給4個TextBlock設定同樣的樣式: 字型、字型大小、字型顏色、加粗設定。

效果圖與實際程式碼如下所示:

上面有講到,樣式是組織和重用的工具。 而上面的程式碼,由於每個元素都是相同的,但是每個元素XAML都重複定義。 下面將介紹通過樣式如何優化上面的程式碼。

• 第一步: 在Resources目錄下定義一個TextBlockStyle的樣式,完整程式碼如下:

Style結構定義了一個 x:key 這點類似於Html中定義id和class,然後即可對相應的class和id樣式生效。TargetType 的設定為型別TextBlock,設定目標型別靜態文字TextBlock。

• 第二步:通過控制元件的Style屬性 來引用x:key 的樣式,程式碼如下:

注意: 當控制元件引用了某個樣式,在控制元件本身並沒有定義該屬性的情況下,優先使用樣式中的定義,否則優先控制元件http://www.cppcns.com本身的定義。如下所示,樣式中設定了顏色為 Red,但是控制元件本身又設定了Green,那麼控制元件的最終效果 Green。

觸發器介紹

顧名思義,觸發器可以理解為,當達到了觸發的條件,那麼就執行預期內的響應,可以是樣式、資料變化、動畫等。觸發器通過 Style.Triggers集合連線到樣式中,每個樣式都可以有任意多個觸發器,並且每個觸發器都是 System.Windows.TriggerBase的派生類例項,以下是觸發器的型別

• Trigger : 監測依賴屬性的變化、觸發器生效
• MultiTrigger : 通過多個條件的設定、達到滿足條件、觸發器生效
• DataTrigger : 通過資料的變化、觸發器生效
• MultiDataTrigger : 多個數據條件的觸發器
• EventTrigger : 事件觸發器,觸發了某類事件時,觸發器生效。

Trigger

下面以Border為例,演示一個http://www.cppcns.com簡單的Trigger觸發器。當滑鼠進入Border的範圍,改變Border的背景顏色和邊框顏色,當滑鼠離開Border的範圍,還原Border的顏色。程式碼如下所示:

實際效果:

MultiTrigger

和Trugger類似,MultiTrigger可以設定多個條件滿足時,觸發,下面以TextBox為例,做一個簡單的Demo當滑鼠進入文字框的範圍,並且游標設定到TextBox上,則把TextBox的背景顏色改變成Red

實際效果:

EventTrigger

事件觸發器,當觸發了某類事件,觸發器執行響應。下面用例項演示,為了能直觀感受到這類觸發器的作用,用動畫演示其功能,下面使用了動畫相關的知識,在學習到後面幾個章節,讀者可以進行相關的內容學習。當滑鼠進入按鈕的範圍中,在0.02秒內,把按鈕的字型變成18號當滑鼠離開按鈕的範圍時,把按鈕的客棧字型變成13號 。 程式碼及效果如下所示:

實際效果:

結尾: 對於 DataTrigger / MultiDataTrigger 的功能類似,只不過觸發條件變成了以資料的方式為條件,這塊,需要了解的可以自個兒進行研究。

到此這篇關於WPF中Style樣式及其觸發器的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。