WPF 重写按钮变成音乐播放器按钮

在使用天天动听音乐播放器的时候，为什么别人的播放暂停按钮可以做的那么漂亮，于是想用WPF来实现下，WPF中可以重写按钮的样式，在winform中就不知道怎么搞了（可能可以来个usercontrol画个圆画两个横线设置些事件然后…）。废话不多说，直接上代码：

1.这里用到了资源字典，先建立一个资源文件，名字为ButtonStyle.xaml，代码如下：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style  TargetType="Button" x:Key="buttonPause">
<Setter Property="Background" Value="White"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse  Height="80" Width="80" Fill="{TemplateBinding Background}" Stroke="Yellow" StrokeThickness="2">
</Ellipse>
<Canvas Height="80" Width="80" Opacity="1">
<Line  X1="25" Y1="20" X2="25" Y2="60" Stroke="Red"  StrokeThickness="5"></Line>
<Line  X1="55" Y1="15" X2="55" Y2="65" Stroke="Red"  StrokeThickness="5"></Line>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FF507FE6"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style  TargetType="Button" x:Key="buttonPlay">
<Setter Property="Background" Value="White"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse  Height="80" Width="80" Fill="{TemplateBinding Background}" Stroke="Yellow" StrokeThickness="2">
</Ellipse>
<Canvas Height="80" Width="80" Opacity="1">
<Line  X1="25" Y1="20" X2="25" Y2="60" Stroke="Red"  StrokeThickness="3"></Line>
<Line  X1="25" Y1="20" X2="60" Y2="40" Stroke="Red"  StrokeThickness="3"></Line>
<Line  X1="25" Y1="60" X2="60" Y2="40" Stroke="Red"  StrokeThickness="3"></Line>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FF507FE6"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

说明下上述代码：建立两个button样式，名字为buttonPause何buttonPlay,都设置了当鼠标移动到按钮上去了之后按钮背景设改变的触发器。原理就是先画个圆和Canvas,然后在Canvas上画两条直线或者三角形，将圆的背景设置成按钮的背景效果如下所示：



鼠标没放上去的播放按钮状态



鼠标放上去的播放按钮状态



鼠标没放上去的暂停按钮状态



鼠标放上去的暂停按钮状态

2.使用资源文件，使用之前要在APP.XAML中加入：

<Application x:Class="重写button.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ButtonStyle.xaml" ></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

加入之后就可以直接在MainWindow中使用了：

<Grid>
<Button Name="btn" Click="btn_Click" Style="{StaticResource  buttonPlay}" ToolTip="播放">
</Button>
</Grid>

在后台 代码中点击按钮切换样式：

private void btn_Click(object sender, RoutedEventArgs e)
{
Button b = (Button)sender;
string toolTip = b.ToolTip.ToString();
if (toolTip == "播放")
{
b.SetValue(Button.StyleProperty, Application.Current.Resources["buttonPause"]);
b.ToolTip = "暂停";
}
else
{
b.SetValue(Button.StyleProperty,Application.Current.Resources["buttonPlay"]);
b.ToolTip = "播放";
}
}