前言
在软件开发过程中,图形元素必不可少,而在WPF中如果使用jpg或png等格式,在应用到Button等控件时的样式时,常常需要做MouseEnter,MouseDown鼠标事件提供不同的颜色或特效。一个图标得分别生成三种颜色才行。如下:
Normal:MouseEnter:
MouseDown:
且jpg与png等图片文件,如果生成大尺寸应用于小的图标会产生锯齿,如果生成小尺寸应用于大的图标则会模糊。
所以,最佳的方式是使用系统能直接识别的特殊符号,如✎❤等,可以拷贝到控件的Content或Text等属性中直接使用,在Trigger或事件中更改Foreground即可,且它在WPF渲染中是矢量的,不必担心它会产生锯齿或模糊等问题。但是系统能直接识别的图标只有部分且对于其它第三方图形它就无能为力了。所以对于第三方的图形,最好的解决方式是将图形转化为Path数据,可在Path控件中使用。
开始
方式1:
网上查找图标直接复制数据,适用于现有图形Path数据;若只是图片没有Path数据,请看方式2。
推荐一个非常不错的图标网站阿里的iconfont,下面以这个图标网站为示例获取Path的数据 。
链接-> iconfont
1. 进入搜索找到想要的图标,然后点击下载按钮。
某些图标只是帖个图片,不是矢量图形的Path数据的无法获取,必须找图标是Path数据的。
2.跳转到新的页面,按F12调出网页代码并选择图标。
以火狐浏览器为例,点击选取页面元素按钮后,鼠标移动到图标并点击,选择中间的图标元素。
注意,选中的元素可能有多个嵌套,选中后下方代码出现Path的那个才是正确的。
3.双击该段代码,将d=""里面的数据选中并拷贝到Geometry资源中:
4.资源调用示例:
可以自己定义一个Button,将Path包含在其中。这样颜色或尺寸等设置可更加随意。
以上方式基本上很多图标都能找到对应的Path 数据,基本上能解决大部分的需要。如果比较少见或没有Path数据的图标,需要自己制作的,请看下面方式2
方式2:
没有Path数据只有图片的,将图形元素转换成Path数据直接在项目中引用。
使用的工具有:
1.VisualStudio
2.Photoshop
3.Microsoft Expression Design 4
接下来,跟着我一步步操作即可:
1.将要转换的图标文件导入Photoshop,然后选择快速选择工具:
2.鼠标点击选中要转换的图形,如图中4个方框就是:
3.右键选中的图形,选择建立工具路径,后面弹出窗口设置容差,可根据图形的精度决定。
4.在路径选项卡可以看到刚刚添加的工作路径,点击添加图层蒙版
5.在属性选项卡中点击选择矢量蒙版。此时在图层中可以看到有图层、图层蒙版和矢量蒙版三个。
6.依次点击文件--> 存储为将文件将文件导出为.psd文件。
Photoshop的处理到此结束 ,接下来是使用Microsoft Expression Design 4将psd文件转换为Path.
7.在Microsoft Expression Design 4中打开刚刚生成的.psd文件,直接按Ctrl+E导出,格式选择XAML WPF资源字典
打开刚刚生成的.xaml文件,将引号内的Clip或ClipGeometry的数据复制(字符可能非常长如果对精度要求不是那么高,可以后面写个方法把小数点后的值去掉),在Path的Data属性中粘贴。
效果图
最后
有比较简单的图形还是可以在Microsoft Expression Design 4中画出来,画的图形会比PS抠的精准,在PS中如果抠不好可能导致图形面目全非。
还有一种方式是直接在PS中生成Path数据,复制数据后做修改,有喜欢这种方式的试试吧
如何通过PS选取获取WPF路径 - 走看看