在 WPF 中使用 Path 路徑

在 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" />