自.NET Framework 3.0 以後，WPF編程框架可使開發人員開發出更加令人耳目一新的桌面應用程序。它使開發工作更加方便快捷，它將設計人員和編程人員的工作分離開來。至於WPF的背景歷史、框架特點、框架結構這裏就不再贅述。有興趣的同袍可在百度搜索關於WPF的相關知識介紹，如WPF。

　　在微軟在WPF框架裏提供了一些基礎功能各異的控件，例如Button、TextBox、Label、Panel、TextBlock等等。微軟將這些組件可視化集成到Visual Studio集成開發工具中了，這在實際生產環境中將有利於提升我們的開發效率。我們可以自己打開Visual Studio 新建WPF應用來使用這些控件。如下圖：

　　在上圖窗體中，WPF提供了不同功能控件，並且有各自默認的外觀樣式。如果說我們為客戶定制一套系統，客戶對系統界面人機交互體驗有著強烈要求，那麽控件默認的默認交互方式和外觀樣式有時候就無法滿足用戶的需求了。

　　例如Button控件，基本以按鈕形式呈現，按鈕默認為灰色，當用戶鼠標懸浮在按鈕上時候按鈕顏色發生變化，當用戶點擊按鈕後，按鈕獲取焦點且按鈕上呈現虛線矩形。下面，我們以按鈕控件為例，介紹下如何通過自定義控件的樣式達到優化控件的目的。首先我們看下最終效果，按鈕上顯示了一個圖標和一串文本字符，鼠標滑動到按鈕控件上時候，控件原有的光亮區域發生變化，然後用戶點擊按鈕時按鈕背景變為純色。

?

　　下面我們分析上面按鈕的構成原理。一般普通按鈕中多為文本內容，在此示例按鈕中左側為一個圖標，右側為文本。如下圖所示，在按鈕（藍色）內容中嵌套一個布局Grid（紫色），我們將Grid設置為一行兩列形式，之後在第一列布局Image顯示圖標（黃色），第二列布局ContentPresenter呈現文本（紅色）。

　　那麽如何實現上述按鈕呢，這就要使用WPF中樣式和模板了。

　　定義一個測試按鈕如下：

1  <Button Height="30" Width="140">測試按鈕</Button>

　　定義完按鈕後我們還需要在當前窗體資源裏定義一個樣式資源，當然你也可以單獨定義到資源字典文件裏，這裏我們將TargetType設置為Button：

1 <Window.Resources>
2         <Style TargetType="Button">
3             <Style.Setters>
4                ··· ···
5             </Style.Setters>
6         </Style>
7 </Window.Resources>

　　下面為測試按鈕定義ControlTemplate模板：

 1 <Setter Property="Template">
 2             <Setter.Value>
 3                 <ControlTemplate TargetType="Button">
 4                     <!--定義圓角外邊框-->
 5                     <Border Name="gridborder" BorderBrush="#87CEFA" BorderThickness="1"  CornerRadius="3" >
 6                         <Border.Background>
 7                             <!--定義圓角外邊框背景-->
 8                             <LinearGradientBrush StartPoint="0 1" EndPoint="0 0">
 9                                 <GradientStop Color="#87CEFA" Offset="0.2"/>
10                                 <GradientStop Color="#FFFFFF" Offset="0.6"/>
11                                 <GradientStop Color="#87CEFA" Offset="0.99"/>
12                             </LinearGradientBrush>
13                         </Border.Background>
14                         <!--定義Grid-->
15                         <Grid>
16                             <Grid.ColumnDefinitions>
17                                 <ColumnDefinition/>
18                                 <!--定義Grid第一列-->
19                                 <ColumnDefinition/>
20                                 <!--定義Grid第二列-->
21                             </Grid.ColumnDefinitions>
22                             <!--定義Image-->
23                             <Image Source="img\download.png" Height="20" Width="20" VerticalAlignment="Center"/>
24                             <!--定義ContentPresenter-->
25                             <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
26                         </Grid>
27                     </Border>
28                 </ControlTemplate>
29             </Setter.Value>
30         </Setter>

　　接下來我們在模板觸發器裏添加鼠標進入按鈕和鼠標點擊按鈕時效果，當鼠標進入按鈕時，我們修改先前定義的gridborder的背景：

 1 <Trigger Property="IsMouseOver"  Value="True">
 2         <Setter TargetName="gridborder" Property="Background">
 3                 <Setter.Value>
 4                     <LinearGradientBrush StartPoint="0 1" EndPoint="0 0">
 5                         <GradientStop Color="#87CEEB" Offset="0.1"/>
 6                         <GradientStop Color="#FFFFFF" Offset="0.5"/>
 7                         <GradientStop Color="#87CEEB" Offset="0.91"/>
 8                     </LinearGradientBrush>
 9                 </Setter.Value>
10         </Setter>
11 </Trigger>

　　當鼠標點擊按鈕時修改定義的gridborder的背景為純色：

1 <Trigger Property="IsPressed"  Value="True">
2          <Setter TargetName="gridborder" Property="BorderThickness" Value="2"/>
3          <Setter TargetName="gridborder" Property="Background" Value="#87CEFA"/>
4 </Trigger>

　　到這裏我們對Button按鈕的樣式和模板定義就基本完成了。

WPF編程之自定義Button控件樣式