根据图片path生成不规则的按钮

最新推荐文章于 2023-10-15 14:59:07 发布

偷血的小花蚊丶

最新推荐文章于 2023-10-15 14:59:07 发布

阅读量952

点赞数

CC 4.0 BY-SA版权

分类专栏： .NET ----- WPF 控件样式

本文链接：https://blog.youkuaiyun.com/younibugudano/article/details/81664116

本文介绍了如何根据SVG图片生成不规则形状的按钮，详细步骤包括UI设计SVG并转换为Path，利用开源项目SvgToXaml转换SVG为XAML代码，设置Path的Data和填充颜色，以及解决缩放和背景色自定义问题。通过在后台代码中替换颜色和使用ViewBox实现按钮的缩放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中要生成如下图所示的不规则的按钮，并且按钮上还需要字体。

参考博客： https://blog.youkuaiyun.com/cmis7645/article/details/7592372

发现可以根据图片的path来生成。

步骤如下：

1.UI设计出SVG图片（可转成path，支持缩放）；

2.利用github上开源项目将svg图片转成path。

下载开源项目，地址：https://github.com/BerndK/SvgToXaml

运行项目，打开svg文件所在目录

点击红色部分可看到生成的xaml代码，绿色部分对应path参数

3.将geometry对应成path的Data，并且填充颜色；然后每个path中有个mousedown事件，可以在事件函数中添加业务代码和改变单个path的背景颜色。

<Viewbox Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="20,0,20,20">
            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Path x:Name="YpBlock" Data="F1 M139.6,177.6z M0,0z M84.54,127.17A1.09,1.09,0,0,0,83.14,127.05A23.42,23.42,0,0,1,56.46,127.05A1.09,1.09,0,0,0,55.06,127.17L23.62,158.6A1.09,1.09,0,0,0,23.62,160.18A69.82,69.82,0,0,0,115.9,160.18A1.09,1.09,0,0,0,115.9,158.6z" PreviewMouseDown="Yp_PreviewMouseDown" PreviewMouseUp="Yp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseLeave="YpBlock_MouseLeave">
                    <Path.Fill>
                        <SolidColorBrush Color="#35A3DD"></SolidColorBrush>
                    </Path.Fill>
                </Path >
                <Path x:Name="XmBlock" Data="F1 M139.6,177.6z M0,0z M50.55,121.14A23.42,23.42,0,0,1,50.55,94.46A1.09,1.09,0,0,0,50.44,93.06L19,61.62A1.11,1.11,0,0,0,17.41,61.62A69.82,69.82,0,0,0,17.41,153.9A1.11,1.11,0,0,0,19,154L50.43,122.56A1.09,1.09,0,0,0,50.55,121.14z" PreviewMouseDown="Xm_PreviewMouseDown" PreviewMouseUp="Xm_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseLeave="XmBlock_MouseLeave"