1.首先看下最终的效果

 

 

 2.达到这种效果的方法是通过对Button的Style进行控制，首先是形状的控制，代码如下：

<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button" >
                        <Border x:Name="border" BorderThickness="0" BorderBrush="Gray" SnapsToDevicePixels="True">
                            <Border.Background>
                                <DrawingBrush>
                                    <DrawingBrush.Drawing>
                                        <GeometryDrawing Brush="{Binding Brush}">
                                            <GeometryDrawing.Pen>
                                                <Pen  Thickness="3" Brush="Gray"></Pen>
                                            </GeometryDrawing.Pen>
                                            <GeometryDrawing.Geometry >
                                                <PathGeometry  Figures="m-70 -80 L200 -80 L230 0 L200 80  L-70 80 A 10,10 0 0 1 -80,70  L-80 70 L-80 -70  A 10,10 0 0 1 -70,-80"></PathGeometry>
                                            </GeometryDrawing.Geometry>
                                        </GeometryDrawing>
                                    </DrawingBrush.Drawing>
                                </DrawingBrush>
                            </Border.Background>
                            <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

其中

<GeometryDrawing.Pen>
         <Pen  Thickness="3" Brush="Gray"></Pen>
</GeometryDrawing.Pen>

这是对外轮廓的属性设置 ；

<GeometryDrawing.Geometry >
         <PathGeometry  Figures="m-70 -80 L200 -80 L230 0 L200 80  
          L-70 80 A 10,10 0 0 1 -80,70  L-80 70 L-80 -70  A 10,10 0 0 
          1 -70,-80">
         </PathGeometry>
</GeometryDrawing.Geometry>

这边是对轮廓的点的设置，这边简单解释一下：

M 是值起始点（Move移动到某一个位置）大写的 M 指示 startPoint 是绝对值；小写的 m 指示 startPoint 是相对于上一个点的偏移量。

L是绘制一条直线（Line 当前点到指定点的一条直线）

Q / T(平滑)是二次贝塞尔曲线，有两个点：一个控制点，一个结束点

C / S(平滑)是三次方贝塞尔曲线，有三个点：两个控制点，一个结束点

H / V 分别是水平直线和垂直直线。

A 创建一条椭圆弧线，这个就比较复杂了，A size（弧线的 x 轴半径和 y 轴半径） rotationAngle（椭圆的旋转度数） isLargeArcFlag（如果弧线的角度应大于或等于 180 度，则设置为 1；否则设置为 0） sweepDirectionFlag（如果弧线按照正角方向绘制，则设置为 1；否则设置为 0） endPoint（结束点）

Z 结束。

其他详细参数：路径标记语法

这边是在倒角处绘制了圆弧，因为用button自带的倒角属性CornerRadius会导致显示不全。

3.最后就是设置阴影

<Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Gray"  Direction="315" ShadowDepth="10" Opacity="10"/>
                </Setter.Value>
            </Setter>
Color是颜色；Direction是阴影的放下，x轴方向为0逆时针增加角度，这边是右下所以是315；ShadowDepth是偏移的距离；Opacit是透明度