WPF使用FontAwesome字體圖標(biāo)

第WPF使用FontAwesome字體圖標(biāo)在WPF程序中，一般接觸到的矢量圖標(biāo)資源有XAML、SVG、字體這三種格式。XAML是標(biāo)準(zhǔn)格式就不說了，SVG并不是直接支持的，不過微軟提供了ExpressionDesign可以非常方便我們將其轉(zhuǎn)換為XAML格式的資源。而對于字體，雖然WPF是直接支持的，但由于字體圖標(biāo)其特殊性，要將其顯示為圖標(biāo)還是需要費點勁的。本文這里就以Font-Awesome為例，介紹一下如何在WPF中使用字體圖標(biāo)。

首先添加一個樣式，為了使用方便，建議直接做為全局樣式：

Stylex:Key="FontAwesome"

SetterProperty="TextElement.FontFamily"Value="pack://application:,,,/Resource/#FontAwesome"/

SetterProperty="TextElement.FontSize"Value="14"/

/Style

請注意我這里的FontFamily的設(shè)置，我是采用的嵌入字體的方式，這樣在沒有裝該字體的機(jī)器上也是能正確顯示圖標(biāo)的。

然后就可以直接使用該樣式了：

Grid

TextBlockText="#xf0c2;"Foreground="Blue"

VerticalAlignment="Center"HorizontalAlignment="Center"FontSize="22"/

/Grid

運(yùn)行后可以得到如下圖標(biāo)了：

原理并不復(fù)雜，將TextBlock的Text設(shè)置為圖標(biāo)對應(yīng)的文字，設(shè)置其FontFamily為FontAwesome即可。但這里有一個小的知識點就是：一般來說，fortawesome之類的圖標(biāo)字體中圖標(biāo)對應(yīng)的文字都是不可以通過輸入法直接輸入的，只能直接輸入Unicode編碼，WPF在XAML中使用Unicode編碼輸入的方式和HTML是一樣的，例如0xf0c2就對應(yīng)為#xf0c2;。

除了TextBlock外，我這里寫的樣式可以應(yīng)用于任何支持字體顯示的控件的：

StackPanel

LabelContent="#xf0c2;"/

ButtonContent="#xf0c2;"/

ContentControlContent="#xf0c2;"/

/StackPanel

運(yùn)行后效果如下：

最后一個問題就是如何找到我們的圖標(biāo)和對應(yīng)的Unicode編碼了，雖然可以通過安裝字體后通過字符映射表查詢，但是這樣只能看到圖形，而我們更希望先根據(jù)文字描述找圖形，再根據(jù)圖形找對應(yīng)的十六進(jìn)制值。好在一般那些字體圖標(biāo)網(wǎng)站上都列舉了其對應(yīng)關(guān)系的。對于fortawesome字體，直接訪如下網(wǎng)頁即可：http://fortawesome.github.io/Font-Awesome/cheatsheet/

或者，也可以使用我這里寫的一個XAML擴(kuò)展，將Font-awsome的字體轉(zhuǎn)換了為枚舉。這樣可以在代碼中使用名字了，程序可讀性要好得多。

classFontValueMarkupExtension:MarkupExtension

publicFontDescriptionFont{get;set;}

publicoverrideobjectProvideValue(IServiceProviderserviceProvider)

varcharactor=typeof(FontDescription).GetField(Font.ToString()