原文:
Blend_ControlTemplate（Z）版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/u010265681/article/details/76651768
對于ControlTemplate沒有一個特定的概念，為了避免過于抽象，可以簡單的了解ControlTemplate是通過改變Style改變控件視覺效果的類。ControlTemplate可以被定義在控件的Xaml代碼中，為了提高複用性，ControlTemplate也會被定義到資源檔案中。
執行個體示範使用Blend建立新的控件ControlTemplate。
首先，在Blend中建立新的項目ControlTemplateDemo，上周Silverlight 4釋出，我已經更新開發環境到Silverlight 4，VS2010和Blend 4 RC， 是以，以後所有項目示範将是基于.Net Framework 4的。
我們計劃建立一個簡單的按鈕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控件模闆建立完畢。