Bootstrap WPF Style(2)-Glyphicons 字体图标

介绍

关于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就可以了.

源码下载:BootstrapWpfStyle.zip

2楼胖子黎

感谢分享，不过这个字体文件 好像是可以下载TTF的吧。那样的话直接指定就成了吧。没有这么复杂 哦。倒是看了你的下载链接，其它bootstrap 的样式都重写了一份，感觉不错。

Re: 普通的地球人

@胖子黎，源文件里有TTF 位置在bootstrap-3.3.0distfontsglyphicons-halflings-regular.ttf，但毕竟这是是wpf,要使用还得强制给客户的电脑安装字体.，总体上用path更方便灵活些.，其实这篇博文主要是资源的分享.，就干了一件事,把svg转成了path

1楼极奇宝

6666666