一、背景
做项目时总是少不了Button，但是普通的Button大家都不喜欢用，总是想要自定义的Button，正好项目中用到不要边框的Button，并且是形状也是根据功能不同而变化的，并且窗口程序是会放大缩小的，如果用图片形式是会出现失真的，并且切换主题时没法变色，当然你可以用多个尺寸的图片，并且每个主题配一套图片，但是很麻烦。
二、实现
以设置按钮为例，当然这里的颜色可能和你需要的不一样，但是没关系是可以自定义的
思路是写一个Usercontrol，继承自Button，然会应用一个样式，这里不直接用样式而是用Usercontrol是因为加了几个DependencyProperty，这样就可以自定义颜色了
Xaml代码
<Button x:Class="PathButton.PathButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Style="{DynamicResource PathButtonStyle}"
d:DesignHeight=""
d:DesignWidth=""
mc:Ignorable="d">
<Button.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin=""
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeDashArray="1 2"
StrokeThickness="" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PathButtonStyle"
TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
<Setter Property="Background" Value="#00000000" />
<Setter Property="BorderBrush" Value="#00000000" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="BorderThickness" Value="0,1,1,1" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<Path x:Name="Path"
Data="{Binding PathData}"
Fill="{Binding DefaultFillBrush}"
RenderTransformOrigin="0.5,0.5"
Stretch="Uniform" />
</Border> <ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="Path" Property="Fill" Value="{Binding DefaultFillBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Path" Property="Fill" Value="{Binding MouseOverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Path" Property="Fill" Value="{Binding IsPressedBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Path" Property="Fill" Value="{Binding IsEnabledBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources> </Button>
后台代码
public partial class PathButton : Button
{
public Geometry PathData
{
get { return (Geometry)GetValue(PathDataProperty); }
set { SetValue(PathDataProperty, value); }
} // Using a DependencyProperty as the backing store for PathData. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PathDataProperty =
DependencyProperty.Register("PathData", typeof(Geometry), typeof(PathButton), new PropertyMetadata(new PathGeometry())); public Brush DefaultFillBrush
{
get { return (Brush)GetValue(DefaultFillBrushProperty); }
set { SetValue(DefaultFillBrushProperty, value); }
} // Using a DependencyProperty as the backing store for DefaultFillBrush. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DefaultFillBrushProperty =
DependencyProperty.Register("DefaultFillBrush", typeof(Brush), typeof(PathButton), new PropertyMetadata(Brushes.DarkGray)); public Brush MouseOverBrush
{
get { return (Brush)GetValue(MouseOverBrushProperty); }
set { SetValue(MouseOverBrushProperty, value); }
} // Using a DependencyProperty as the backing store for MouseOverBrush. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MouseOverBrushProperty =
DependencyProperty.Register("MouseOverBrush", typeof(Brush), typeof(PathButton), new PropertyMetadata(Brushes.DeepSkyBlue)); public Brush IsPressedBrush
{
get { return (Brush)GetValue(IsPressedBrushProperty); }
set { SetValue(IsPressedBrushProperty, value); }
} // Using a DependencyProperty as the backing store for IsPressedBrush. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsPressedBrushProperty =
DependencyProperty.Register("IsPressedBrush", typeof(Brush), typeof(PathButton), new PropertyMetadata(Brushes.DodgerBlue)); public Brush IsEnabledBrush
{
get { return (Brush)GetValue(IsEnabledBrushProperty); }
set { SetValue(IsEnabledBrushProperty, value); }
} // Using a DependencyProperty as the backing store for IsEnabledBrush. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsEnabledBrushProperty =
DependencyProperty.Register("IsEnabledBrush", typeof(Brush), typeof(PathButton), new PropertyMetadata(Brushes.LightGray)); public PathButton()
{
InitializeComponent();
DataContext = this;
}
}
用法
<pathButton:PathButton x:Name="Button"
Width="50"
Height="50"
PathData="M31.679651,15.723C22.841078,15.723 15.677,22.887022 15.677,31.724249 15.677,40.562878 22.841078,47.727002 31.679651,47.727002 40.518124,47.727002 47.682003,40.562878 47.682003,31.724249 47.682003,22.887022 40.518124,15.723 31.679651,15.723z M25.174641,0L30.947304,8.1649995 30.977009,8.163671C31.891628,8.1361193,32.811726,8.1617675,33.732849,8.2423577L34.116646,8.2807278 40.096367,0.5289996 49.181995,4.5158782 47.510448,14.236901 47.626137,14.339919C48.479649,15.11912,49.268909,15.955267,49.990528,16.839653L50.234638,17.14785 60.403648,15.836 64.007996,25.079203 55.322643,31.217757 55.324234,31.258986C55.34618,32.174153,55.314838,33.094563,55.22847,34.015755L55.226952,34.030385 63.345997,40.294331 59.359104,49.380002 49.249798,47.645153 49.143776,47.764214C48.695721,48.255009,48.228832,48.72456,47.744774,49.172226L47.324875,49.549786 48.723995,60.394425 39.48156,64 33.403603,55.403061 33.023663,55.43042C32.149929,55.481137,31.270197,55.483376,30.38839,55.435608L29.679308,55.383191 23.130268,63.875 14.041999,59.886834 15.844025,49.393521 15.71986,49.282948C15.207753,48.815411,14.718776,48.32737,14.253661,47.820706L13.803129,47.315312 3.612031,48.630002 0.0080004195,39.385499 8.0905037,33.673707 8.0481892,33.048829C7.9875851,31.908507,8.0095654,30.758269,8.1175261,29.606822L8.1191311,29.59272 0,23.328246 3.9867127,14.242 14.093521,15.978928 14.104487,15.966273C15.033746,14.935561,16.045525,13.997155,17.124784,13.156928L17.159048,13.131042 15.929999,3.6040602z"
DefaultFillBrush="Red"
MouseOverBrush="Yellow"
IsPressedBrush="Blue"
IsEnabledBrush="Black"/>
这样就完成了，你只需要给一个你Path就可以显示你想要的按钮了，如果想改变颜色就设置下3个Brush就可以
三、效果
默认样式
鼠标进入
鼠标按下
Tips：可以在 nuget 里搜索 PathButton 安装使用啦