WPF 如何绘制不规则按钮,并且有效点击范围也是不规则的

 首先你的PNG图片背景必须是透明的,然后用PS工具打开该图片。



1、按住CTR键,点击图层,是图片处于选中状态




2、切换到路径面板,点击【从选区生成工作路径】





3、点击菜单栏上的【图层】--【矢量蒙版】--【当前路径】





4、点击【文件】--【存储为】psd文件。


5、用VS2013导入该PSD文件,选择图层点击确定;

6.将不规则按钮样式复制到WPF项目中,例如App.xaml 中


        <Style x:Key="btn_yixing" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Path Data="F1M83,0C207.321,0 331.679,0 456,0 507.462,-0.004 584.065,-9.435 622,8 638.651,15.653 657.05,32.458 667,47 685.188,73.581 686.02,177.623 667,203 658.939,213.756 626.144,237.557 609,243 600.001,244.666 590.999,246.333 582,248 585.212,251.624 583.92,261.072 583,266 576.72,299.646 563.531,318.109 538,332 518.191,342.778 475.415,338.002 446,338 376.007,338 305.993,338 236,338 205.913,338.001 159.188,343.799 139,332 126.5,324.694 76.312,272.994 98,247 29.088,246.502 -11.689,188.683 1,110 4.332,89.34 3.252,71.956 10,55 23.131,22.004 50.778,14.766 83,0z" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Path.RenderTransform>
                                <Path.Effect>
                                    <DropShadowEffect ShadowDepth="0" BlurRadius="22" Color="#FF646464"/>
                                </Path.Effect>
                                <Path.Fill>
                                    <LinearGradientBrush>
                                        <GradientStop Color="Red" Offset="1"/>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


7.将刚才VS2013导入PSD文件后,xaml页面中的代码截取Clip的值复制出来,替换到到按钮样式中的 Path Data 的值即可;


8.此时按钮引用此样式,即可实现按钮不规则形状,触发也是不规则形状;

9.如果测试时需要查看触发区域可以在按钮样式中更改背景色;

相关推荐

网友评论(0)