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