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是透明度