快捷導(dǎo)航

WPF中Style樣式及其觸發(fā)器

更新時(shí)間：2022年01月27日 10:25:08 作者：痕跡g

這篇文章介紹了WPF中Style樣式及其觸發(fā)器，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

示例

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

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

效果圖與實(shí)際代碼如下所示:

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

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

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

第二步:通過(guò)控件的Style屬性來(lái)引用x:key 的樣式, 代碼如下:

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

觸發(fā)器介紹

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

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

Trigger

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

實(shí)際效果:

MultiTrigger

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

實(shí)際效果:

EventTrigger

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