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

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

偷血的小花蚊丶

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

阅读量812

点赞数

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

本文链接：https://blog.csdn.net/younibugudano/article/details/81664116

版权

.NET ----- WPF 控件样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

参考博客： https://blog.csdn.net/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">
                    <Path.Fill>
                        <SolidColorBrush Color="#35A3DD"></SolidColorBrush>
                    </Path.Fill>
                </Path>

                <Path x:Name="XpBlock" Data="F1 M139.6,177.6z M0,0z M122.18,61.66A1.11,1.11,0,0,0,120.59,61.66L89.16,93.06A1.08,1.08,0,0,0,89.05,94.46A23.42,23.42,0,0,1,89.05,121.14A1.08,1.08,0,0,0,89.16,122.54L120.59,154A1.11,1.11,0,0,0,122.18,154A69.82,69.82,0,0,0,122.18,61.72z" PreviewMouseDown="Xp_PreviewMouseDown" PreviewMouseUp="Xp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseLeave="XpBlock_MouseLeave">
                    <Path.Fill>
                        <SolidColorBrush Color="#35A3DD"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="YmBlock" Data="F1 M139.6,177.6z M0,0z M23.62,57L55.06,88.44A1.08,1.08,0,0,0,56.46,88.55A23.42,23.42,0,0,1,83.14,88.55A1.08,1.08,0,0,0,84.54,88.44L116,57A1.11,1.11,0,0,0,116,55.41A69.82,69.82,0,0,0,23.72,55.41A1.1,1.1,0,0,0,23.62,57z" PreviewMouseDown="Ym_PreviewMouseDown" PreviewMouseUp="Ym_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseLeave="YmBlock_MouseLeave">
                    <Path.Fill>
                        <SolidColorBrush Color="#35A3DD"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="ZpBlock" Data="F1 M139.6,177.6z M0,0z M4.42,47L11,47A4.36,4.36,0,0,0,13.56,46.16A96.49,96.49,0,0,1,51.34,29.94A4.4,4.4,0,0,0,54.92,25.61L54.92,4.42A4.42,4.42,0,0,0,50.5,0L4.42,0A4.42,4.42,0,0,0,0,4.42L0,42.59A4.42,4.42,0,0,0,4.42,47z" PreviewMouseDown="Zp_PreviewMouseDown" PreviewMouseUp="Zp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseLeave="ZpBlock_MouseLeave">
                    <Path.Fill>
                        <SolidColorBrush Color="#35A3DD"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="ZmBlock" Data="F1 M139.6,177.6z M0,0z M88.25,29.94A96.37,96.37,0,0,1,126,46.18A4.39,4.39,0,0,0,128.57,47.02L135.13,47.02A4.43,4.43,0,0,0,139.56,42.59L139.56,4.42A4.42,4.42,0,0,0,135.17,0L89.1,0A4.42,4.42,0,0,0,84.68,4.42L84.68,25.61A4.4,4.4,0,0,0,88.25,29.94z" PreviewMouseDown="Zm_PreviewMouseDown" PreviewMouseUp="Zm_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MouseLeave="ZmBlock_MouseLeave">
                    <Path.Fill>
                        <SolidColorBrush Color="#35A3DD"></SolidColorBrush>
                    </Path.Fill>
                </Path>

                <Path x:Name="ZpBlock2" Data="F1 M139.6,177.6z M0,0z M17,21.48L22.88,14 17.14,14 17.14,12 25.86,12 25.86,13.93 19.86,21.49 25.86,21.49 25.86,23.49 17,23.49z" PreviewMouseDown="Zp_PreviewMouseDown" PreviewMouseUp="Zp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="#0770A7" x:Name="PressedBrush"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="ZpBlock3" Data="F1 M139.6,177.6z M0,0z M26.93,20.29L26.93,18.29 30.13,18.29 30.13,15.09 32.19,15.09 32.19,18.29 35.39,18.29 35.39,20.29 32.19,20.29 32.19,23.51 30.13,23.51 30.13,20.29z" PreviewMouseDown="Zp_PreviewMouseDown" PreviewMouseUp="Zp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                
                <Path x:Name="XmBlock2" Data="F1 M139.6,177.6z M0,0z M18,110.94L15.2,110.94 18.91,105.07 15.38,99.42 18.26,99.42 20.31,103.17 22.42,99.42 25.2,99.42 21.64,105 25.38,111 22.46,111 20.27,107z" PreviewMouseDown="Xm_PreviewMouseDown" PreviewMouseUp="Xm_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="XmBlock3" Data="F1 M139.6,177.6z M0,0z M25.94,105.42L30.3,105.42 30.3,107.53 25.94,107.53z" PreviewMouseDown="Xm_PreviewMouseDown" PreviewMouseUp="Xm_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>

                <Path x:Name="YmBlock2" Data="F1 M139.6,177.6z M0,0z M70.59,53.17L73.32,53.17 69.47,60.37 69.47,64.69 67.06,64.69 67.06,60.37 63.06,53.17 65.89,53.17 68.29,58.17z" PreviewMouseDown="Ym_PreviewMouseDown" PreviewMouseUp="Ym_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="YmBlock3" Data="F1 M139.6,177.6z M0,0z M73,59.17L77.36,59.17 77.36,61.28 73,61.28z" PreviewMouseDown="Ym_PreviewMouseDown" PreviewMouseUp="Ym_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>

                <Path x:Name="YpBlock2" Data="F1 M139.6,177.6z M0,0z M68.15,147.05L70.88,147.05 67,154.25 67,158.56 64.6,158.56 64.6,154.25 60.6,147.05 63.44,147.05 65.83,152.05z" PreviewMouseDown="Yp_PreviewMouseDown" PreviewMouseUp="Yp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="YpBlock3" Data="F1 M139.6,177.6z M0,0z M71.6,155.35L71.6,153.35 74.81,153.35 74.81,150.1 76.81,150.1 76.81,153.31 80.01,153.31 80.01,155.31 76.81,155.31 76.81,158.52 74.81,158.52 74.81,155.31z" PreviewMouseDown="Yp_PreviewMouseDown" PreviewMouseUp="Yp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>

                <Path x:Name="XpBlock2" Data="F1 M139.6,177.6z M0,0z M112.85,110.94L110.05,110.94 113.75,105.07 110.23,99.42 113.11,99.42 115.11,103.17 117.22,99.42 120,99.42 116.53,105 120.27,111 117.35,111 115.16,107z" PreviewMouseDown="Xp_PreviewMouseDown" PreviewMouseUp="Xp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="XpBlock3" Data="F1 M139.6,177.6z M0,0z M121,107.72L121,105.72 124.2,105.72 124.2,102.52 126.26,102.52 126.26,105.72 129.46,105.72 129.46,107.72 126.26,107.72 126.26,110.94 124.2,110.94 124.2,107.72z" PreviewMouseDown="Xp_PreviewMouseDown" PreviewMouseUp="Xp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>

                <Path x:Name="ZmBlock2" Data="F1 M139.6,177.6z M0,0z M106.93,21.48L112.82,14 107.08,14 107.08,12 115.81,12 115.81,13.93 109.81,21.49 115.81,21.49 115.81,23.49 106.92,23.49z" PreviewMouseDown="Zm_PreviewMouseDown" PreviewMouseUp="Zm_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="ZmBlock3" Data="F1 M139.6,177.6z M0,0z M116.67,18L121,18 121,20.1 116.64,20.1z" PreviewMouseDown="Zm_PreviewMouseDown" PreviewMouseUp="Zm_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="White"></SolidColorBrush>
                    </Path.Fill>
                </Path>
            </Grid>
        </Viewbox>

在此过程中有几个问题：1.就是如果我不用 系统的颜色（下图所示

）填充path的背景色（即rgb转换），path的背景色不会改变；然后我就想到一个办法：在xaml中先用16进制的颜色填充一个path，然后再在后台代码替换。这样就可以得到需要的背景颜色。

<Path x:Name="ZpBlock2" Data="F1 M139.6,177.6z M0,0z M17,21.48L22.88,14 17.14,14 17.14,12 25.86,12 25.86,13.93 19.86,21.49 25.86,21.49 25.86,23.49 17,23.49z" PreviewMouseDown="Zp_PreviewMouseDown" PreviewMouseUp="Zp_PreviewMouseUp" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Path.Fill>
                        <SolidColorBrush Color="#0770A7" x:Name="PressedBrush"></SolidColorBrush>
                    </Path.Fill>
                </Path>

            _originBrush = this.ZmBlock.Fill;
            _pressedBrush = PressedBrush;
            this.ZpBlock2.Fill = Brushes.White;

2.此过程生成的控件不支持缩放功能，然后我又将grid替换为viewbox。

如有错误，请指出，谢谢（svg图片放在评论中）

偷血的小花蚊丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
根据图片path生成不规则的按钮

项目中要生成如下图所示的不规则的按钮，并且按钮上还需要字体。需要做成的按钮参考博客： https://blog.csdn.net/cmis7645/article/details/7592372 发现可以根据图片的path来生成。步骤如下：1.UI设计出SVG图片（可转成path，支持缩放）；2.利用github上开源项目将svg图片转成path。下载开源项目，地...
复制链接

扫一扫