WPF中的各類控件元素, 都可以自由的設(shè)置其樣式。 諸如:

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

而樣式則是組織和重用以上的重要工具。不是使用重復(fù)的標(biāo)記填充XAML, 通過Styles創(chuàng)建一系列封裝所有這些細(xì)節(jié)的樣式。然后通過Style屬性應(yīng)用封裝好的樣式。這點類似于CSS樣式。然而, WPF樣式的功能更加強(qiáng)大, 如控件的行為。WPF的樣式還支持觸發(fā)器(后面章節(jié)會講到)。

示例

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

下面的例子中, 給4個TextBlock設(shè)置同樣的樣式: 字體、字體大小、字體顏色、加粗設(shè)置。

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

上面有講到, 樣式是組織和重用的工具。 而上面的代碼, 由于每個元素都是相同的, 但是每個元素XAML都重復(fù)定義。 下面將介紹通過樣式如何優(yōu)化上面的代碼。

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

Style結(jié)構(gòu)定義了一個 x:key 這點類似于Html中定義id和class, 然后css即可對相應(yīng)的class和id樣式生效。TargetType 的設(shè)置為類型TextBlock, 設(shè)置目標(biāo)類型靜態(tài)文本TextBlock。

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

注意: 當(dāng)控件引用了某個樣式, 在控件本身并沒有定義該屬性的情況下,優(yōu)先使用樣式中的定義,否則優(yōu)先控件本身的定義。如下所示, 樣式中設(shè)置了顏色為 Red, 但是控件本身又設(shè)置了Green, 那么控件的最終效果 Green。

觸發(fā)器介紹

顧名思義, 觸發(fā)器可以理解為, 當(dāng)達(dá)到了觸發(fā)的條件, 那么就執(zhí)行預(yù)期內(nèi)的響應(yīng), 可以是樣式、數(shù)據(jù)變化、動畫等。觸發(fā)器通過 Style.Triggers集合連接到樣式中, 每個樣式都可以有任意多個觸發(fā)器, 并且每個觸發(fā)器都是 System.Windows.TriggerBase的派生類實例, 以下是觸發(fā)器的類型

• Trigger : 監(jiān)測依賴屬性的變化、觸發(fā)器生效
• MultiTrigger : 通過多個條件的設(shè)置、達(dá)到滿足條件、觸發(fā)器生效
• DataTrigger : 通過數(shù)據(jù)的變化、觸發(fā)器生效
• MultiDataTrigger : 多個數(shù)據(jù)條件的觸發(fā)器
• EventTrigger : 事件觸發(fā)器, 觸發(fā)了某類事件時, 觸發(fā)器生效。

Trigger

下面以Border為例, 演示一個簡單的Trigger觸發(fā)器。當(dāng)鼠標(biāo)進(jìn)入Border的范圍, 改變Border的背景顏色和邊框顏色, 當(dāng)鼠標(biāo)離開Border的范圍, 還原Border的顏色。代碼如下所示:

實際效果:

MultiTrigger

和Trugger類似, MultiTrigger可以設(shè)置多個條件滿足時, 觸發(fā), 下面以TextBox為例, 做一個簡單的Demo當(dāng)鼠標(biāo)進(jìn)入文本框的范圍, 并且光標(biāo)設(shè)置到TextBox上, 則把TextBox的背景顏色改變成Red

實際效果:

EventTrigger

事件觸發(fā)器, 當(dāng)觸發(fā)了某類事件, 觸發(fā)器執(zhí)行響應(yīng)。下面用實例演示, 為了能直觀感受到這類觸發(fā)器的作用, 用動畫演示其功能,下面使用了動畫相關(guān)的知識, 在學(xué)習(xí)到后面幾個章節(jié), 讀者可以進(jìn)行相關(guān)的內(nèi)容學(xué)習(xí)。當(dāng)鼠標(biāo)進(jìn)入按鈕的范圍中, 在0.02秒內(nèi), 把按鈕的字體變成18號當(dāng)鼠標(biāo)離開按鈕的范圍時, 在0.02秒內(nèi), 把按鈕的字體變成13號 。 代碼及效果如下所示:

實際效果:

結(jié)尾: 對于 DataTrigger / MultiDataTrigger 的功能類似, 只不過觸發(fā)條件變成了以數(shù)據(jù)的方式為條件, 這塊, 需要了解的可以自個兒進(jìn)行研究。

到此這篇關(guān)于WPF中Style樣式及其觸發(fā)器的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論