Bootstrap WPF Style (2) -- Glyphicons font icon, wpf -- glyphicons

Bootstrap WPF Style (2) -- Glyphicons font icon, wpf -- glyphicons
Introduction

For the Glyphicons font icon, first give the friendly link Glyphicons

This project is based on the Bootstrap WPF Style project, see http://www.cnblogs.com/tsliwei/p/6138412.html

The PathGeometries folder and Glyphicons. xaml file are added to the project to store path data resources.

The Path. xaml file is added to the Styles folder to store the path style.

Added the Win_Glyphicons.xaml form to store the sample code.

 

Add Glyphicons. xaml resources in App. xaml

Add Path. xaml resources to Bootstrap. xaml in the Styles folder

The Glyphicons font icon in this project is still based on bootstrap-3.3.0. I added the svg file in the bootstrap source code to the Content folder.

At present, the official version has reached 3.3.7, so go to the official website.

Effect

I converted all the font icons into path data, which makes it easy to use. The style of path can use glyphicon, and the data attribute can reference resources.

Of course, you should write your own style when using the path. Note that setting the Stretch attribute to Uniform is fine.

Example:

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

Convert SVG to Xaml

The following describes how to convert svg to xmal.

First, let's take a look at the source file, which is actually an xml.

There are many glyph in it. each glyph is a font icon, and the d attribute in it is actually the data attribute of path in xmal. the difference is that the data here is directly written into the xmal path, and the figure is upside down and upside down.

We can do some processing through the Inkscape software and save it as xmal.

The second one is used as an example (the data is short ):

Create a new text document with the following content:

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>

Note that d in the path of the second row is d in the second glyph.

Change the extension name .txt of the connector to. svg and open it with Inkscape.

Select path, change x and y to 0, click vertical flip, and save it as xmal.

 

Download the source code: BootstrapWpfStyle.zip