wpf自定义按钮样式

wpf采用xaml文件的方式来向开发者提供绘制界面的平台。本篇我将根据自己在编写软件过程中的经历，向大家介绍一下如果自定义按钮的样式。通过这些介绍，你可以做出带圆角的按钮，带图标的按钮，颜色渐变的按钮，以及设置在鼠标经过，以及点击时按钮的样式。

（1）先看效果：

第一个是带圆角和渐变背景的按钮（蓝色是界面背景，与按钮无关）：

正常状态


鼠标停留时的样式

（按钮变亮）

第二个是半透明按钮：类似于qq的关闭按钮（同样墨绿色和粉红色是界面背景上的与按钮无关）
正常状态


（从上到下由于墨绿色变透明） 鼠标停留后的样式

（背景从上到下由红变透明）

第三种是带图标的按钮（蓝色背景同样是界面背景，与按钮无关）
正常状态


鼠标停留后的样式


（边框发光）
点击后的样式

（边框发黑）
（2）为达到上面的效果你需要做的仅仅是在按钮的xaml代码中添加一段模板代码，然后根据自己的需要对代码进行一些修改：
原始代码：
第一种效果按钮的代码：

<Button x:Name="Button_Login" Content="登    录" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top" Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="Silver" Offset="0.5" />
<GradientStop Color="White" Offset="0.0" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Border.Background" TargetName="PART_Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Silver" Offset="0.0" />
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Silver" Offset="0.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="UIElement.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

第二种效果代码：

<Button Content="×" HorizontalAlignment="Left" Height="21" Margin="353,0,0,0" VerticalAlignment="Top" Width="22" Foreground="White" BorderBrush="#FF285A5C" Click="Button_Click" Background="Transparent" FontWeight="Bold" IsTabStop="False">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" Name="PART_Background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF484753" Offset="0.0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Border.Background" TargetName="PART_Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF90250E" Offset="0.0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="UIElement.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

第三种效果代码：

<Button HorizontalAlignment="Left" Margin="279,222,0,0" VerticalAlignment="Top" Width="37" Height="38" BorderBrush="Transparent" BorderThickness="0" ToolTip="忘记密码" IsTabStop="False">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Transparent" Offset="0.0" />
<GradientStop Color="Transparent" Offset="0.0" />
<GradientStop Color="Transparent" Offset="0.0" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Width="40" Height="40">
<Rectangle.Fill>
<ImageBrush  Stretch="Fill" ImageSource="button_ForgetPwd.png" />
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="UIElement.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Yellow" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="UIElement.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

其实三段代码大同小异，如果你直接要和上述三种按钮一样的样式，直接复制代码即可，如果需要详细了解以便设计自己的按钮样式，则以第一个按钮的代码为例，我们详细研究一下代码各部分的作用。

（3）、代码分析
① <Button x:Name="Button_Login"
Content="登
录" HorizontalAlignment="Left" Margin="111,222,0,0" VerticalAlignment="Top"
Width="120" Height="32" IsDefault="True" Click="Button_Login_Click">
这个是经典的按钮样式，各个属性的具体功能就不再介绍了，但是需要注意的是，和系统默认的button xaml代码不同的地方是后>没有/与之对应的是在这段代码最后应该有</Button>来包裹代码，学过标记语言的朋友肯定知道这个。如果没有学习过标记语言，需要稍微了解一下，至少知道它是一种嵌套结构的语言。
②在<button></button>的下一级标签是<Button.Template></ Button.Template
>，它的下一级仅嵌套了一个< ControlTemplate >< /ControlTemplate >是一个类似于容器的标记。而它的下一级主要分为两大部分。第一部分是确定按钮上都有哪些东西。如果只需要设置按钮样式而需要添加背景图片呢么只需要一个<Border></Border>标签即可。可以参看第一个，第二个按钮，他们在<
ControlTemplate >< /ControlTemplate >中的第一部分内容是：

<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="8,8,8,8" Name="PART_Background">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="Silver" Offset="0.5" />
<GradientStop Color="White" Offset="0.0" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>

其中CornerRadius="8,8,8,8"表示按钮的上下左右圆角，可以通过设置此处的参数来改变按钮的形状。不一定是四个角都是圆角，可以根据自己的需要，对四个角进行设置。最内部的三个GradientStop是用来控制按钮的背景颜色的。Color可以直接指定颜色名称，也可以通过RGB颜色指定。Offset表示该颜色的垂直起始位置。而其后的数字为距离顶端的百分比。这里的GradientStop可以有n多个。用以设置按钮从上到下几中不同的颜色变化上述代码是从0-按钮的0.5处由白变银，05-1处由银变白。而对于第二种样式按钮需要从红色渐变为透明，因此需要两个GradientStop，第一个颜色红色，offset0，第二个transparent（透明），offset1.有了这个可以在按钮任意位置设置任意颜色。
但是如果不仅仅要设置按钮样式，还要为按钮添加背景图片，那么就需要用<Grid></Grid>包裹<Border></Border>标签。与<Border></Border>平等地在其后面添加一个

<Rectangle Width="40" Height="40">
<Rectangle.Fill>
<ImageBrush  Stretch="Fill" ImageSource="button_ForgetPwd.png" />
</Rectangle.Fill>
</Rectangle>

也就是说这时候< ControlTemplate >< /ControlTemplate >的第一部分标签是<Grid></Grid>
而<Grid></Grid>的下一级包括两部分<Border></Border>用于设置按钮样式，<Rectangle></Rectangle>用于设置背景图片。
③< ControlTemplate >< /ControlTemplate >的第二部分是按钮响应样式，也就是鼠标停留，或者鼠标点击时按钮的样式，它的标签为<ControlTemplate.Triggers></
ControlTemplate.Triggers>
其中包含的是所有的按钮响应样式。其中的每一个响应样式格式为

<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Border.Background" TargetName="PART_Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Silver" Offset="0.0" />
<GradientStop Color="White" Offset="0.5" />
<GradientStop Color="Silver" Offset="0.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>

其中Property用于指示按钮的响应事件类型，Property="UIElement.IsMouseOver"为鼠标停留，Property="ButtonBase.IsPressed"为鼠标按下。而其对应按钮样式的设置方式有两种，如果需要设置按钮颜色，像按钮1一样则内部为如上述代码一样，其样式具体设置方式，与前面按钮默认样式设置一样。而如果仅需要修改边框颜色则可以采用按钮3的方式：

<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="UIElement.Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" Color="Yellow" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
</Setter.Value>
</Setter>
</Trigger>

其区别请读者自行研究。
本文是我在绘制软件界面时，通过查阅相关资料，并自行揣测理解所得，其间可能有一下谬误或不完善的地方，忘大家多提意见，大家一起进步！
mushao 2014-8-27@hust