自.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中樣式和模板了。

定義一個測試按鈕如下：

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

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

<Window.Resources>
        <Style TargetType="Button">
            <Style.Setters>
               ··· ···
            </Style.Setters>
        </Style>
</Window.Resources>

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

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <!--定義圓角外邊框-->
                    <Border Name="gridborder" BorderBrush="#87CEFA" BorderThickness="1"  CornerRadius="3" >
                        <Border.Background>
                            <!--定義圓角外邊框背景-->
                            <LinearGradientBrush StartPoint="0 1" EndPoint="0 0">
                                <GradientStop Color="#87CEFA" Offset="0.2"/>
                                <GradientStop Color="#FFFFFF" Offset="0.6"/>
                                <GradientStop Color="#87CEFA" Offset="0.99"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <!--定義Grid-->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <!--定義Grid第一列-->
                                <ColumnDefinition/>
                                <!--定義Grid第二列-->
                            </Grid.ColumnDefinitions>
                            <!--定義Image-->
                            <Image Source="img\download.png" Height="20" Width="20" VerticalAlignment="Center"/>
                            <!--定義ContentPresenter-->
                            <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

接下來我們在模板觸發器裡新增滑鼠進入按鈕和滑鼠點選按鈕時效果，當滑鼠進入按鈕時，我們修改先前定義的gridborder的背景：

<Trigger Property="IsMouseOver"  Value="True">
        <Setter TargetName="gridborder" Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0 1" EndPoint="0 0">
                        <GradientStop Color="#87CEEB" Offset="0.1"/>
                        <GradientStop Color="#FFFFFF" Offset="0.5"/>
                        <GradientStop Color="#87CEEB" Offset="0.91"/>
                    </LinearGradientBrush>
                </Setter.Value>
        </Setter>
</Trigger>

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

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

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