在 WPF 中使用 Path 路径

时间：2022-08-12 08:52:43

在 WPF 中总会修改 Button 的 Style，比如一个自定义的 Close 按钮。刚入门的可能会用一张 PNG 格式的图片来做这个按钮的 Icon，但这个是不优雅的。而且你要改的时候还得去操作文件，想想都痛苦。

但是很多人苦于不知道去哪里获取 Path，当然网上已经有不少使用 Photoshop 获取图片的 Path ，但如果图片的质量不好，获取的 Path 歪歪曲曲的也不好看，更何况在这之前你还得会使用 Photoshop。

现在分享一个我经常使用的解决方案，阿里巴巴矢量图，这上面可以说有海量的图标可以用到。

流程：

　　1，进入 阿里巴巴矢量图 并搜索你想要的图标

　　2，下载 Icon 时使用 SVG 下载

　　3，用记事本或文本编辑器打开，标签 Path 下的 d 属性就是 Path 的 Data 数据（很多复杂一点的 Icon 可能是多个 Data 组成，使用时只要用空格把几个 Data 隔开就行）

　　例子：

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

　　<svg t="1491032725422" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2372" xmlns:xlink="http://www.w3.org/1999/xlink" width="248" height="248">
　　<defs>
　　　　<style type="text/css"></style>

　　</defs>

　　<path d="M503.2868 510.9903m-349.4226 0a341.233 341.233 0 1 0 698.8452 0 341.233 341.233 0 1 0-698.8452 0Z" p-id="2373"></path>

　　<path d="M106.1386 263.9677a110 100 0 1 1 121.6696 248.2668Z" p-id="2374"></path>

</svg>

　　在WPF中使用时：

<Path Data="M503.2868 510.9903m-349.4226 0a341.233 341.233 0 1 0 698.8452 0 341.233 341.233 0 1 0-698.8452 0Z M106.1386 263.9677a110 100 0 1 1 121.6696 248.2668Z"/>

Data 也可以作为资源放在独立的资源字典里，使用的 Geometry 标签

<Geometry x:Key="logo">M503.2868 510.9903m-349.4226 0a341.233 341.233 0 1 0 698.8452 0 341.233 341.233 0 1 0-698.8452 0Z M106.1386 263.9677a110 100 0 1 1 121.6696 248.2668Z</Geometry>

XAML：

<Path Data="{StaticResource logo}"

      Fill="White" Stretch="Fill" Stroke="White" StrokeThickness="1.5" />

相关文章