WPF 如何自定義圖標—擴展篇

引言

在之前我們講解了如何在WPF中自定義控件，需要了解可以走下面的鏈接。

應用篇

續篇

前言

我們作爲開發人員，畢竟自己的畫畫和圖標設計功底不是很好。因此如何獲取立意明顯、表達準確的圖標？似乎是亟需解決的問題。雖然在前言中，我簡單提了一下如何獲取圖標的方式。但是不夠詳細，本文專門針對這個問題出具自己較爲詳細的解決方法。

 

應用

首先簡單介紹下自己得到較爲完整的圖標數據需要用到的工具。

AI

阿里巴巴圖庫網站

 

下面我們來介紹下流程

1.下載圖標資源

2.通過AI軟件獲取圖標XAML格式數據。

 

示例

 

我們Iconfont上下載我們的圖標資源。如下圖所示，下載AI格式：

用AI軟件打開該文件，

如下圖所示

導出XAML

注意，默認情況下可能AI軟件不支持這個格式。

打開xaml文件之後，其內容如下：

<!-- Created with Ai->XAML Export Plug-In Version 0.3 (PC/64) -->
<!-- By Mike Swanson (http://blog.mikeswanson.com/)           -->

<Viewbox Width="682.668" Height="614.398"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="682.668" Height="614.398">

  <Canvas>

  <Canvas>

  <!-- 圖層 1/<編組>/<複合路徑> -->
  <Path Fill="#ff221e1f" Data="F1 M 0.000,375.465 M 0.000,375.465 C 0.000,432.020 45.848,477.867 102.398,477.867 L 307.199,477.867 L 307.199,546.133 L 170.668,546.133 C 151.816,546.137 136.539,561.418 136.539,580.266 C 136.539,599.117 151.816,614.398 170.668,614.398 L 512.000,614.398 C 530.848,614.398 546.129,599.117 546.129,580.266 C 546.129,561.418 530.848,546.137 512.000,546.133 L 375.465,546.133 L 375.465,477.867 L 580.266,477.867 C 636.820,477.867 682.668,432.020 682.668,375.465 L 682.668,341.332 L 0.000,341.332 L 0.000,375.465 Z M 580.266,0.000 L 102.398,0.000 C 45.848,0.000 0.000,45.848 0.000,102.398 L 0.000,273.066 L 682.668,273.066 L 682.668,102.398 C 682.668,45.848 636.820,0.000 580.266,0.000 L 580.266,0.000 Z"/>

  </Canvas>

  </Canvas>
</Canvas>
</Viewbox>

然後將數據應用到我們的項目中，來看看效果。

定義

使用

 

效果

 

Over

每次記錄一小步…點點滴滴人生路…