深入詳解WPF ControlTemplate
WPF圖形界面顯示工具是由微軟公司研發(fā)的一款全新的圖形處理工具。它的使用可以幫助開發(fā)人員簡單的實現(xiàn)圖形界面的開發(fā)。#t#
WPF包含數(shù)據(jù)模板和控件模板,其中控件模板又包括ControlTemplate和ItemsPanelTemplate,這里討論一下WPF ControlTemplate。
其實WPF的每一個控件都有一個默認的模板,該模板描述了控件的外觀以及外觀對外界刺激所做出的反應(yīng)。我們可以自定義一個模板來替換掉控件的默認模板以便打造個性化的控件。
與Style不同,Style只能改變控件的已有屬性值(比如顏色字體)來定制控件,但控件模板可以改變控件的內(nèi)部結(jié)構(gòu)(VisualTree,視覺樹)來完成更為復雜的定制,比如我們可以定制這樣的按鈕:在它的左辦部分顯示一個小圖標而它的右半部分顯示文本。
要替換控件的模板,我們只需要聲明一個WPF ControlTemplate對象,并對該ControlTemplate對象做相應(yīng)的配置,然后將該ControlTemplate對象賦值給控件的Template屬性就可以了。
WPF ControlTemplate包含兩個重要的屬性:
1,VisualTree,該模板的視覺樹,其實我們就是使用這個屬性來描述控件的外觀的
2,Triggers,觸發(fā)器列表,里面包含一些觸發(fā)器Trigger,我們可以定制這個觸發(fā)器列表來使控件對外界的刺激發(fā)生反應(yīng),比如鼠標經(jīng)過時文本變成粗體等。
參考以下代碼
- < Button>
- < Button.Template> < ControlTemplate>
- < !--定義視覺樹-->
- < Grid>
- < Ellipse Name="faceEllipse" Width="
{TemplateBinding Button.Width}"
Height="{TemplateBinding Control.Height}"
Fill="{TemplateBinding Button.Background}"/>- < TextBlock Name="txtBlock"
Margin="{TemplateBinding Button.Padding}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="{TemplateBinding Button.Content}" />- < /Grid> < !--定義視覺樹_end-->
- < /ControlTemplate>
- < /Button.Template>
- < /Button>
在上面的代碼中,我們修改了Button的Template屬性,我們定義了一個WPF ControlTemplate,在< ControlTemplate> ... < /ControlTemplate>之間包含的是模板的視覺樹,也就是如何顯示控件的外觀,我們這里使用了一個Ellipse(橢圓)和一個TextBlock(文本塊)來定義控件的外觀。
很容易聯(lián)想到一個問題:控件(Button)的一些屬性,比如高度、寬度、文本等如何在新定義的外觀中表現(xiàn)出來呢?
我們使用TemplateBinding 將控件的屬性與新外觀中的元素的屬性關(guān)聯(lián)起來Width="{TemplateBinding Button.Width}" ,這樣我們就使得橢圓的寬度與按鈕的寬度綁定在一起而保持一致,同理我們使用Text="{TemplateBinding Button.Content}"將TextBlock的文本與按鈕的Content屬性綁定在一起。