在WPF中使用fortawesome之类的字体图标

标签：des   style   blog   http   io   color   os   使用   sp   

我之前在博客中介绍过几个矢量图库网站，在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。XAML是标准格式就不说了，SVG并不是直接支持的，不过微软提供了Expression Design可以非常方便我们将其转换为XAML格式的资源。而对于字体，虽然WPF是直接支持的，但由于字体图标其特殊性，要将其显示为图标还是需要费点劲的。本文这里就以Font-Awesome为例，介绍一下如何在WPF中使用字体图标。

首先添加一个样式，为了使用方便，建议直接做为全局样式：

    <Style x:Key="FontAwesome" >
        <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Resource/#FontAwesome" />
        <Setter Property="TextElement.FontSize" Value="14" />
    </Style>

请注意我这里的FontFamily的设置，我是采用的嵌入字体的方式，这样在没有装该字体的机器上也是能正确显示图标的。

然后就可以直接使用该样式了：

    <Grid>
        <TextBlock Text="&#xf0c2;"Style="{StaticResource FontAwesome}" Foreground="Blue"
                 VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"/>
    </Grid>

运行后可以得到如下图标了：

原理并不复杂，将TextBlock的Text设置为图标对应的文字，设置其FontFamily为FontAwesome即可。但这里有一个小的知识点就是：一般来说，fortawesome之类的图标字体中图标对应的文字都是不可以通过输入法直接输入的，只能直接输入Unicode编码，WPF在XAML中使用Unicode编码输入的方式和HTML是一样的，例如0xf0c2就对应为"&#xf0c2;" 。

除了TextBlock外，我这里写的样式可以应用于任何支持字体显示的控件的：

    <StackPanel>
        <Label Content="&#xf0c2;" Style="{StaticResource FontAwesome}" />
        <Button Content="&#xf0c2;" Style="{StaticResource FontAwesome}"/>
        <ContentControl Content="&#xf0c2;" Style="{StaticResource FontAwesome}"/>
    </StackPanel>

运行后效果如下：

最后一个问题就是如何找到我们的图标和对应的Unicode编码了，虽然可以通过安装字体后通过字符映射表查询，但是这样只能看到图形，而我们更希望先根据文字描述找图形，再根据图形找对应的十六进制值。好在一般那些字体图标网站上都列举了其对应关系的。对于fortawesome字体，直接访如下网页即可：http://fortawesome.github.io/Font-Awesome/cheatsheet/

在WPF中使用fortawesome之类的字体图标

标签：des   style   blog   http   io   color   os   使用   sp   

原文地址：http://www.cnblogs.com/TianFang/p/4127295.html