介绍
关于Glyphicons字体图标,首先给出友情链接 Glyphicons
这个项目是在Bootstrap WPF Style项目基础上做的,详见http://www.cnblogs.com/tsliwei/p/6138412.html
项目里添加了PathGeometries文件夹和Glyphicons.xaml文件,用来存放path的data资源.
Styles文件夹里添加了Path.xaml文件,存放path的样式.
添加了Win_Glyphicons.xaml窗体,存放示例.
App.xaml里添加Glyphicons.xaml资源
Styles文件夹里的Bootstrap.xaml添加Path.xaml资源
此项目里的Glyphicons字体图标依然是基于bootstrap-3.3.0,我把bootstrap源码里的svg文件添加到了Content文件夹下
目前官方版本已经到3.3.7了,所以去官网http://v3.bootcss.com/components/#glyphicons看到的图标会比项目里的多.不过没关系,下面我会介绍下简单的办法把svg转成xmal.
效果
我把字体图标都转成了path的data,使用起来很方便.path的style使用glyphicon,data属性引用资源就可以了.
当然path的样式实际使用的时候应该会自己写了,注意下Stretch属性设置为Uniform就好了.
例:
1 <Path Style="{DynamicResource glyphicon}" Data="{DynamicResource glyphicon-asterisk}"></Path>
SVG转Xaml
下面介绍下svg转xmal的方法吧.
首先看下源文件,其实是个xml.
里面有很多的glyph,每一个glyph就是一个字体图标,里面的d属性,其实就是对应xmal里path的data属性.有点不同的是,这里的数据直接写到xmal的path里,图形是上下颠倒的.
我们通过Inkscape软件做一些处理,保存为xmal就可以了.
以上面截图的第二条为例(数据比较短):
新建一个文本文档,里面写上以下内容:
1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4 5 <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 6 7 <path d="M200 400h900v300h-900v-300z" /> 8 9 </svg>
注意第7行path里面的d就是截图的第二条glyph里面的d.
将文本的扩展名.txt改成.svg 然后用Inkscape打开
打开后选中path,把上面的x和y都改成0,然后点一下
垂直翻转.然后另存为xmal就可以了.