其他分享
首页 > 其他分享> > WPF如何设置一个自定义轮廓的控件,以及阴影的控制。

WPF如何设置一个自定义轮廓的控件,以及阴影的控制。

作者:互联网

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

 

标签:控件,倒角,自定义,直线,弧线,这边,设置,WPF,绘制
来源: https://www.cnblogs.com/bigdick/p/14875599.html