Expression Blend實例中文教程(13) - 控件模板快速入門ControlTemplates
上篇,介紹了控件樣式(Style)和模板(Template)的基礎概念,並且演示了使用Blend設計控件樣式。本篇將繼續介紹使用Blend設計自定義控件模板 - ControlTemplate。ControlTemplate可以稱為控件模板,簡單的理解為控件結構和行為的集合。在項目設計中,經常會使用ControlTemplate創建新的控件模板或者修改現成的控件模板,使用項目的UI具有獨特性。如何使用Blend創建和修改ControlTemplate是本文即將討論的話題。
概述
對於ControlTemplate沒有一個特定的概念,為了避免過於抽象,可以簡單的理解ControlTemplate是通過改變Style改變控件視覺效果的類。ControlTemplate可以被定義在控件的Xaml代碼中,為了提高復用性,ControlTemplate也會被定義到資源文件中。
實例
學習ControlTemplate最好的方法還是實踐,下面,我將使用實例演示使用Blend創建新的控件ControlTemplate。
首先,在Blend中創建新的項目ControlTemplateDemo,上周Silverlight 4發布,我已經升級開發環境到Silverlight 4,VS2010和Blend 4 RC, 所以,以後所有項目演示將是基於.Net Framework 4的。
大家會發現Blend 4創建新項目和Blend 3沒有太大區別。
我們計劃創建一個簡單的按鈕ControlTemplate,
現在,從左邊工具欄選中矩形框,在主設計窗口畫一個矩形框,使用Radius修改矩形框邊緣為圓形。該矩形框是為了Button的模板控件做基礎使用的。
然後修改矩形背景和邊框顏色,這裏大家可以按照自己的喜好和需求自行設置背景色和邊框顏色。
然後在主設計窗口選中該矩形控件,點擊鼠標右鍵,選中“Make Into Control..."選項,
這個選項是將當前控件轉換到指定控件模板中,在以下彈出窗口中,可以選擇需要轉換的控件類型,從以下窗口可以看出,矩形控件可以轉換到所有控件模板中,下面Name是模板樣式名稱,Define in是創建該資源模板到指定位置。這些和前文教程內容相同,不再贅述。
這裏,我們使用默認的name,將模板信息放在本地文檔資源中,因為我們演示創建按鈕controltemplate,所以在點擊OK前,必須從上面的窗口中選擇“Button”,點擊OK後主設計窗口將顯示按鈕樣式。
到這裏一個簡單的ControlTemplate已經創建完了。我們打開Objects and Timeline看看當前控件模板組成信息,從下圖我們可以看到,該Button模板,是由一個矩形控件和ContentPresenter組成的。
再看看該按鈕模板代碼,從以下代碼中可以看出,在資源中,定義了一個新的ControlTemplate,該控件模板目標控件類型是Button( <ControlTemplate TargetType="Button">),ControlTemplate內部由Rectangle和ContentPresenter組成。
1 <UserControl.Resources>2 <Style x:Key="ButtonStyle1" TargetType="Button">
3 <Setter Property="Template">
4 <Setter.Value>
5 <ControlTemplate TargetType="Button">
6 <Grid>
7 <Rectangle RadiusY="20" RadiusX="20" Stroke="White" StrokeThickness="8">
8 <Rectangle.Fill>
9 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
10 <GradientStop Color="#FFF0F5FD" Offset="0"/>
11 <GradientStop Color="#FF009CFF" Offset="1"/>
12 </LinearGradientBrush>
13 </Rectangle.Fill>
14 </Rectangle>
15 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
16 </Grid>
17 </ControlTemplate>
18 </Setter.Value>
19 </Setter>
20 </Style>
21 </UserControl.Resources>
這時,我們可以保存所有修改,點擊“F5”運行當前項目。在運行後,可以在瀏覽器中看到一個Button
但是該Button沒有任何的視覺效果和Button事件。也就是說,在這個新的控件模板中,缺少VSM狀態信息。根據上一篇Blend控制VSM中可以得知,在Blend中的States菜單欄中,可以輕松的控制控件的VSM狀態,下面,我們添加一些簡單的狀態效果。
首先,選中新創建的Button控件,然後打開左邊菜單欄States,如果沒有發現該Tab,可以在Blend的Window菜單選中States就會出現了。
在按鈕的Normal狀態,就是我們初始化設置的狀態,現在我們修改MouseOver的控件視覺效果.
在States中,選中MouseOver,然後在主設計窗口選中Button控件,
在右邊Properties屬性欄,簡單的修改Button的背景色,
這樣,鼠標覆蓋到Button控件時,顏色會改變,再點擊F5運行,可以將鼠標放在控件上,這時會發現VSM會切換視覺狀態。
按照以上方法,我們修改“Pressed”和"Disabled“狀態。
Pressed:
Disabled:
在運行F5後,測試會發現VSM狀態切換已經實現,但是缺乏體驗效果,當鼠標放在Button時,我們希望看到漸變效果,當鼠標點擊Button後,也希望看到漸變效果,這裏我們需要添加Transition過渡效果到各個狀態。
在States菜單下,選中Normal狀態,
在狀態右邊,會看到有個箭頭狀按鈕,點擊添加Transition過渡效果,
點擊Transition按鈕後,會彈出一個過渡效果列表,這裏表示從Normal狀態過渡到不同的狀態所呈現的效果。
其中需要註意的是 "* -> Normal",表示從任何效果到Normal,“Normal -> *”,表示從Normal到任何效果。
這裏,我們選中“Normal -> MouseOver”。
我們可以設置從Normal過渡到MouseOver要用什麽動畫效果呈現,過渡動畫時間設置。
這裏我們可以選擇Easing效果,關於Easing的介紹,已經在過去的教程中詳解,這裏不再贅述。
設置過渡時間為0.3秒,點擊F5,看看設置的效果,當鼠標放在Button後,會出現漸變的動畫效果。
按照以上的方法,依次類推,
在MouseOver狀態,添加Normal狀態,
在Pressed狀態,添加MouseOver狀態,
再次運行項目,Button控件會在各種狀態下出現不同的過渡動畫效果。
這時再次查看模板代碼,會發現在ControlTemplate中,出現了VisualStateManager選項。
代碼
我們簡單的添加一個Button點擊事件,來測試新創建的Button控件。
選中Button控件,在右邊Properties屬性欄上面,點擊Events
Blend會列出該控件所有的Events事件,這裏我們選中Click,雙擊後,在主設計窗口會切換到後臺代碼cs編輯界面. Blend自動創建Button控件Click事件方法,
我們在btDemo_Click中添加簡單代碼
1 private void btDemo_Click(object sender, System.Windows.RoutedEventArgs e)
2 {
3 // TODO: Add event handler implementation here.
4 btDemo.Content = "我是測試按鈕";
5 }
F5測試,點擊Button,會發現控件文本標簽內容被修改。也說明我們創建的ControlTemplate已經繼承了所有Button的功能。
至此,一個自定義ControlTemplate控件模板創建完畢。
如果您在開發設計過程中遇到問題,歡迎留言給我。
項目源代碼下載
Expression Blend實例中文教程(13) - 控件模板快速入門ControlTemplates