WPF界面设计技巧（2）—自定义漂亮的按钮样式(上)

　　本文示例源代码或素材下载

　　上次做了个很酷的不规则窗体，这次我们来弄点好看的按钮出来，此次将采用纯代码来设计按钮样式，不需要 Microsoft Expression Design 辅助了。

　　首先打开 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>
　　　　　　　　　　　　　　　　　　<BeginStoryboard>
　　　　　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　　　　　<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)" />
　　　　　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　　　　　</BeginStoryboard>
　　　　　　　　　　　　　　　　</Trigger.ExitActions>
　　　　　　　　　　　　　　</Trigger>
　　　　　　　　　　　　　　<!--按钮按下弹起-->
　　　　　　　　　　　　　　<Trigger Property="IsPressed" Value="True">
　　　　　　　　　　　　　　　　<Trigger.EnterActions>
　　　　　　　　　　　　　　　　　　<BeginStoryboard>
　　　　　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　　　　　<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)" />
　　　　　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　　　　　</BeginStoryboard>
　　　　　　　　　　　　　　　　</Trigger.EnterActions>
　　　　　　　　　　　　　　　　<Trigger.ExitActions>
　　　　　　　　　　　　　　　　　　<BeginStoryboard>
　　　　　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　　　　　<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)" />
　　　　　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　　　　　</BeginStoryboard>
　　　　　　　　　　　　　　　　</Trigger.ExitActions>
　　　　　　　　　　　　　　</Trigger>
　　　　　　　　　　　　　　<!--按钮失效-->
　　　　　　　　　　　　　　<Trigger Property="IsEnabled" Value="False">
　　　　　　　　　　　　　　　　<Setter Property="Foreground" Value="#B444"/>
　　　　　　　　　　　　　　　　<Trigger.EnterActions>
　　　　　　　　　　　　　　　　　　<BeginStoryboard>
　　　　　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　　　　　<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)" />
　　　　　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　　　　　</BeginStoryboard>
　　　　　　　　　　　　　　　　</Trigger.EnterActions>
　　　　　　　　　　　　　　　　<Trigger.ExitActions>
　　　　　　　　　　　　　　　　　　<BeginStoryboard>
　　　　　　　　　　　　　　　　　　　　<Storyboard>
　　　　　　　　　　　　　　　　　　　　　　<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
　　　　　　　　　　　　　　　　　　　　　　<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)" />
　　　　　　　　　　　　　　　　　　　　　　<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)" />
　　　　　　　　　　　　　　　　　　　　</Storyboard>
　　　　　　　　　　　　　　　　　　</BeginStoryboard>
　　　　　　　　　　　　　　　　</Trigger.ExitActions>
　　　　　　　　　　　　　　</Trigger>
　　　　　　　　　　　　</ControlTemplate.Triggers>
　　　　　　　　　　</ControlTemplate>
　　　　　　　　</Setter.Value>
　　　　　　</Setter>
　　　　</Style>
　　</Application.Resources>
</Application>