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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM