介紹
關於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就可以了.