BootstrapBootstrap WPF Style(二)–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窗体,存放示例.

 Bootstrap 1Bootstrap 2Bootstrap 3

App.xaml里添加Glyphicons.xaml资源

Bootstrap 4

Styles文件夹里的Bootstrap.xaml添加Path.xaml资源

Bootstrap 5Bootstrap 6

此项目里的Glyphicons字体图标依旧是遵照bootstrap-3.3.0,我把bootstrap源码里的svg文件添加到了Content文件夹下

Bootstrap 7

时下法定版本已经到3.3.7了,所以去官网http://v3.bootcss.com/components/#glyphicons看样子的图标会比项目里的多.可是没关系,下面我会介绍下简单的方法把svg转成xmal.

效果

Bootstrap 8

自己把字体图标都转成了path的data,使用起来很方便.path的style使用glyphicon,data属性引用资源就可以了.

当然path的体制实际行使的时候理应会融洽写了,注意下Stretch属性设置为Uniform就好了.

例:

1 <Path Style="{DynamicResource glyphicon}" Data="{DynamicResource glyphicon-asterisk}"></Path>

SVG转Xaml

下面介绍下svg转xmal的情势吧.

率先看下源文件,其实是个xml.

Bootstrap 9

个中有很多的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打开

Bootstrap 10

Bootstrap 11

开辟后入选path,把下边的x和y都改成0,然后点一下Bootstrap 12 垂直翻转.然后另存为xmal就足以了.

 

源码下载:BootstrapWpfStyle.zip

相关文章