WPF界面設計技巧（2）—自定義漂亮的按鈕樣式

首先打開 Microsoft Visual Studio 2008 ，建立一個WPF項目，在上面随便放幾個按鈕：

然後給各個按鈕設定不同的背景顔色：

設定好之後就是這樣啦：

然後我們就開始在 App.xaml 檔案中定義按鈕樣式了：

定義的樣式代碼如下：

Code

<Application x:Class="WPFButton.App"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    StartupUri="Window1.xaml">

    <Application.Resources>

        <!--定義按鈕樣式-->

        <Style TargetType="Button">

            <Setter Property="Foreground" Value="Black"/>

            <!--修改模闆屬性-->

            <Setter Property="Template">

                <Setter.Value>

                    <!--控件模闆-->

                    <ControlTemplate TargetType="Button">

                        <!--背景色-->

                        <Border x:Name="back" Opacity="0.8" CornerRadius="3">

                            <Border.BitmapEffect>

                                <OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" />

                            </Border.BitmapEffect>

                            <Border.Background>

                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">

                                    <GradientBrush.GradientStops>

                                        <GradientStopCollection>

                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>

                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>

                                            <GradientStop Color="#FFF" Offset="1"/>

                                        </GradientStopCollection>

                                    </GradientBrush.GradientStops>

                                </LinearGradientBrush>

                            </Border.Background>

                            <!--前景色及邊框-->

                            <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">

                                <Border.Background>

                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                        <GradientBrush.GradientStops>

                                            <GradientStopCollection>

                                                <GradientStop Color="#6FFF" Offset="0.5"/>

                                                <GradientStop Color="#1111" Offset="0.51"/>

                                            </GradientStopCollection>

                                        </GradientBrush.GradientStops>

                                    </LinearGradientBrush>

                                </Border.Background>

                                <!--按鈕内容-->

                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding  Content}">

                                    <ContentPresenter.BitmapEffect>

                                        <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />

                                    </ContentPresenter.BitmapEffect>

                                </ContentPresenter>

                            </Border>

                        </Border>

                        <!--觸發器-->

                        <ControlTemplate.Triggers>

                            <!--滑鼠移入移出-->

                            <Trigger Property="IsMouseOver" Value="True">

                                <Trigger.EnterActions>

                                    <BeginStoryboard>

                                        <Storyboard>

                                            <DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                                        </Storyboard>

                                    </BeginStoryboard>

                                </Trigger.EnterActions>

                                <Trigger.ExitActions>

                                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                                </Trigger.ExitActions>

                            </Trigger>

                            <!--按鈕按下彈起-->

                            <Trigger Property="IsPressed" Value="True">

                                            <DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                            <!--按鈕失效-->

                            <Trigger Property="IsEnabled" Value="False">

                                <Setter Property="Foreground" Value="#B444"/>

                                            <DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />

                                            <DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />

                                            <DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />

                                            <ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />

                                            <ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />

                                            <ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />

                                            <ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />

                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />

                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />

                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />

                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Application.Resources>

</Application>

看了先不要頭大，我們先看看最終效果，然後回過頭來再解釋代碼：

這是正常樣式

這個是滑鼠移到上面時的樣式

這個是滑鼠點選時的樣式

還有就是按鈕失效時的樣式

效果還算不錯吧，下面來講解代碼喽，頭暈的同學可以現在就收拾東西回家了哈。

我們先來看這個命名為“back”的 Border 元素，它用它的 Background 屬性充當了整個按鈕的背景色。

<Border.Background>

其背景所用的是一個漸變筆刷，起始值和中間值都是引用的按鈕本身的背景色，就是我們之前設定過的顔色啦，終止值是白色，這樣通過位置調整，我們可以在按鈕最下部産生一些向白色的過度色彩效果。

<Border.BitmapEffect>

它的 BitmapEffect 屬性我們設定了一個大小為 0 的外發光效果，平常是看不見這效果的，在這裡預先設定好，是為了在滑鼠移入、按下時實作動畫使用。

再來看看這個命名為“fore”的 Border 元素，它實作的是按鈕的邊框和高亮反光效果，我為它設定了一個半透明的黑色1像素邊框，使得這個邊框的色彩可以和背景色混合起來。

它的背景同樣采用的漸變筆刷，起始值和終止值的位置幾乎貼在一起，進而形成比較鮮明的反光度對比。

ContentPresenter 元素用于呈現按鈕原本的内容，對于按鈕來說就是按鈕上的文字了，當然也可能會存在圖檔或其它東西。

我為之加了一個不太明顯的陰影濾鏡以增強顯示效果。

剩下的就是些可愛又該死的 Trigger ，我們通過這些觸發器來改變按鈕在不同狀态時的外觀。

在滑鼠移入按鈕時，我依次建立了改變外發光效果大小、改變上部反光區域顔色、改變下部反光區域顔色的動畫，這裡的要點就在于“Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"”屬性設定語句，琢磨一下你就能看出這是對屬性路徑的描述，隻不過它們寫起來和看起來都很讓人生氣。

按下和彈起按鈕時，我們做了相似的動畫改變，與前面相比隻是數值略微不同。

當按鈕失效時，我要改變很多東西，首先将文字顔色設為灰色，然後依次建立了改變外發光效果大小、改變内容陰影效果不透明度、改變内容陰影效果角度、改變内容陰影效果顔色、改變按鈕邊框顔色、改變上部反光區域顔色、改變下部反光區域顔色的動畫。

這裡将先前對内容應用的陰影效果徹底改變，使之産生凹陷的效果。

好了，到這裡就下課啦，文章有點冗長了，但應該對新手很有幫助，老鳥估計現在已經夢遊仙境了吧。

<a href="http://files.cnblogs.com/SkyD/WPFButton20080715014834.rar">源檔案下載下傳</a>