Expression Blend實例中文教程(12) - 樣式和模板快速入門Style,Template
在上一篇，介紹了Visual State Manager視覺狀態管理器，其中涉及到控件的樣式（Style）和模板（Template），本篇將詳細介紹樣式（Style）和模板（Template）在Silverlight項目中的應用，並介紹如何使用Blend設計樣式（Style）和模板（Template）。
在LOB（Line-of-Business）企業級應用項目開發中，為了使項目的視覺效果多樣化，不僅僅使用動畫效果，而且經常還需要修改部分控件的樣式（Style）和模板（Template）。 在Silverlight的控件包中，微軟已經定義了默認控件樣式和模板，開發人員可以在這些默認的代碼上進行修改和調整，以達到項目需求。但是由於默認的控件樣式和模板代碼過於冗長，手工修改起來相對復雜和繁瑣，對此，微軟封裝了一些新的功能在Blend中，方便開發人員和設計人員對模板和樣式進行控制。 在學習Blend控制樣式（Style）和模板（Template）前，還是先快速了解一下樣式（Style）和模板（Template）。
樣式（Style），有HTML開發基礎的朋友對傳統的CSS樣式表並不陌生，HTML將所有公用的屬性代碼匯集到CSS文件中，使用CSS控制頁面的背景，控制表格的寬度，控制控件距離等。Silverlight中的樣式（Style）和CSS相同，允許設計人員和開發人員將控件的公用屬性定義到資源文件中，允許相同屬性控件自由調用，這樣不僅提高了代碼的復用性，而且保證了控件外觀在項目中的一致性。
模板（Template），模板的概念在傳統的Web頁面開發中已經被引入，早期Dreamweaver因為支持創建Web模板設計，吸引了不少Web開發者。Silverlight中同樣引進了模板的概念。在Silverlight中，凡是繼承自System.Windows.Controls命名控件的控件都有一套默認的模板，設計人員和開發人員可以基於默認模板的基礎上進行修改，創建自定義模板。
樣式（Style）和模板（Template）的定義
在Silverlight中，樣式和模板定義是很簡單的，因為很多屬性已經被封裝好，不需要自行創建，只需要調用就可以了。簡單的演示代碼：
Style：
1 <UserControl.Resources>2 <Style x:Key="TextBoxStyle" TargetType="TextBox">
3 這裏定義具體樣式屬性
4 </Style>
5 </UserControl.Resources>
Template：
1 <UserControl.Resources>2 <ControlTemplate x:Key="TextBoxTemplate" TargetType="TextBox" >
3 <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10"
4 Background="Red">
5 這裏定義具體模板
6 </Border>
7 </ControlTemplate>
8 </UserControl.Resources>
樣式（Style）和模板（Template）的使用
在Silverlight中樣式（Style）和模板（Template）都屬於控件資源，也就是說，兩者都可以被定義在資源文件中，而在項目頁面中，僅需使用Style和Template屬性調用就可以了。
Style：
1 <TextBox Style={"StaticResource TextBoxStyle"} Text="樣式測試" />
Template：這個方法，也是Blend所支持的方法，下面我們看看實例，進一步理解。
1 <TextBox Template={"StaticResource TextBoxTemplate"} Text="模板測試" />
上面介紹了樣式和模板的最基本的用法。在實際項目中，我們經常把模板（Template）定義在樣式（Style）中，也就是將Template作為一個屬性被賦值在Style中，這樣當樣式（Style）被應用在控件中時，新的模板也會同時加載。例如下面Button樣式代碼，<Setter Property="Template"> Template是作為Style的屬性被設置的:
代碼
下面我們用一個簡單的實例來理解Style（樣式）和Template（模板）。
首先，我們創建一個新的項目StyleTemplateDemo作為演示。
打開MainPage，在主設計窗口中，添加三個按鈕控件到該頁面，
對於Button控件的樣式屬性控制，最簡單的方法就是從右邊Properties屬性欄，
如果需要創建自定義樣式，則需要按照以下步驟：
首先選中其中一個按鈕控件，在左上角可以看到Button控件下拉菜單，
點擊“[Button]”下拉菜單，選擇“Edit Template”，然後選擇“Edit a Copy”，
或者，可以在主設計窗口，使用鼠標右鍵選中控件，選擇“Edit Template”，然後選擇“Edit a Copy”，
選中“Edit a Copy”，系統會彈出提示窗口，詢問“Create Style Resource”是否創建樣式資源，
其中Name（Key）是樣式名，以後調用該樣式將使用這個Name；
Define in 有三個選擇：
1. Application（應用），該選項是將該樣式代碼添加到App.Xaml文件中；
2. This document（當前文檔），該選項是將該樣式代碼添加到當前編輯文檔中，當前我們編輯MainPage.Xaml,如果選中此項，樣式代碼將被輸出到該文件中；
3. Resource dictionary（資源目錄），該選項是將該樣式代碼添加到自定義資源文件中，如果沒有資源文件，可以點擊“New”創建自定義資源文件；
在This document（當前文檔）中，該選項有兩個選擇，
“UserControl:<no name>”,選中該選項樣式代碼將在當前文檔創建<UserControl.Resources>，
調用是使用前面的基礎調用代碼：
1 <Button Margin="114,197,0,228" Width="139" Content="Button" HorizontalAlignment="Left" d:LayoutOverrides="Width" Style="{StaticResource ButtonStyle1}"/>
“Button:<no name>”，選中該選項樣式代碼將創建在該控件資源下，
對比以上三種定義樣式代碼方式，第一種和第三種方法相對來說比較靈活，將樣式代碼放在公共資源文件中，方便其他頁面相同屬性控件調用；而第二種方法，僅供該文件中的相同屬性控件調用。
這裏我們Define in選擇Application，定義樣式代碼到App.xaml中，點擊確定後，系統會打開App.xaml文件，進入控件樣式編輯狀態，這時就可以對控件樣式進行編輯。
當前主設計窗口打開文件為"App.xaml",因為該文件包含了要編輯的樣式和模板代碼。
在控件處於樣式和模板編輯狀態下，從Objects and Timeline窗口可以查看該控件模板的子部件，通過修改包含的子部件樣式，來改變原按鈕控件樣式。
例如我們想改變Button的背景色，可以修改BackgroundGradient屬性，從上圖的Objects and Timeline中選中BackgroundGradient，
在右邊Properties屬性欄，修改顏色，即可看到在主設計窗口按鈕的背景色在改變。
保存以上修改後，回到主設計窗口，能看到兩個Button已經被應用了新的Button樣式，
1 <Grid x:Name="LayoutRoot" Background="White">2 <Button x:Name="bt1" Margin="254,151,247,0" Width="139" Content="按鈕樣式" Style="{StaticResource ButtonStyle1}" Height="55" VerticalAlignment="Top"/>
3 <Button Margin="0,151,92,0" Width="139" Content="Button" HorizontalAlignment="Right" d:LayoutOverrides="Width" Height="55" VerticalAlignment="Top"/>
4 <Button Margin="94,151,0,0" Width="139" Content="Button" HorizontalAlignment="Left" d:LayoutOverrides="Width" Style="{StaticResource ButtonStyle1}" Height="55" VerticalAlignment="Top"/>
5 </Grid>
從代碼中可以看出，使用 Style="{StaticResource ButtonStyle1}" 的按鈕，已經將默認Button樣式替換為新的Button樣式。如果想修改最後一個Button的樣式，同樣，把Style="{StaticResource ButtonStyle1}" 屬性添加到Button中即可。 在Blend中可以非常簡單的應用新的樣式到控件。
在需要被應用樣式的Button控件上點擊鼠標右鍵，然後選擇“Edit Template”->“Apply Resource” ->選中當前需要被應用的樣式，在主設計窗口即可看到控件樣式的變化。
現在，我們切換左邊的Objects and Timeline 到 States，當前選中的States是CommonStates組中的Normal， 閱讀過上一篇VSM教程的，相信對這裏並不陌生，Normal表示Button控件的正常視圖狀態。
這裏我們可以看到，在主設計窗口，Button樣式仍舊是紫色
當我們選中MouseOver視圖狀態時，主設計窗口Button樣式，變成默認的樣式。這說明，每個Visual State視覺狀態都有自己獨立樣式，和上一篇講述的控件每個視圖狀態都有獨立性是相符的。
所以，要修改完整的一套控件樣式，需要以控件的視圖狀態為基礎，修改每個會引起控件視圖產生變化的狀態。這裏，我們選中MouseOver後，切換Tab到 Objects and Timeline，
選中“BackgroundGradient”，修改Button控件在鼠標覆蓋後的背景，
保存後，F5運行該例程，當鼠標放在Button上，自動會切換Button樣式。
Normal狀態：
MouseOver狀態：
Pressed狀態：
上圖可以看出Pressed狀態並沒有改變，仍舊是默認樣式。其樣式修改方法與上面的方法相同，這裏不再重復，大家可以按照以上方法修改。
對於控件樣式的的控制，基本已經講完。在下一篇將介紹Template模板的應用實例。
Expression Blend實例中文教程(12) - 樣式和模板快速入門Style,Template