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

每次记录一小步…点点滴滴人生路…