WPF自定义控件与样式增加备注版(1)-矢量字体图标(iconfont)

WPF自定义控件与样式祥注(1)-矢量字体图标(iconfont)

本文引用了博客园博主 /梦里花落知多少/ 的文章，并对文章的内容进行完全的实践，并附上更详细的步骤，达到笔记与注解的目的，另附上原文的地址:http://www.cnblogs.com/anding/p/4961215.html

一.图标字体

在我们多个WPF项目中广泛使用了图标字体，包括自定义控件、自定义样式、模板等。总结下：

• 网上开源字体图标很多，很容易获取，项目开发中需要的绝大部分图标都可以找到，非常方便，推荐 阿里巴巴开源字体；

• 字体文件非常小，比使用png等图片文件要小很多；

• 比使用普通图片资源性能要好很多；

• 和普通字体一样，是矢量的，可任意放大缩小（设置字体大小）不失真;

• 唯一的缺点就是颜色的设置有局限，只能用单色，或者使用画刷实现渐变色等效果。不过这一点貌似问题也不大。

二.下载字体文件

2.1 下载的开源字体库

如Font-Awesome(http://fortawesome.github.io/Font-Awesome/)，类似的开源字体库有很多，提供的图标比较丰富，但不容易扩展和修改。

2.2 Iconfont-阿里巴巴

地址：http://www.iconfont.cn/
提供了大量的字体图标（包括网友共享的），可以选择需要的字体（图标），然后打包到一个字体文件，且可以随意修改字符的编码、字体名称等，真的是一个良心的开源项目。

2.2.1 字体打包过程:

1.选定需要的字体(图标)添加入库，右上角购物车栏会显示当前选中了几个:

2.点击购物车，选择下载代码

3.找到需要的字体文件

其中iconfont.ttf即为我们需要的字体文件。

三.WPF中如何使用字体图标

接下来在项目中实际使用字体文件

3.1 新建wpf项目

建立新的wpf项目，命名为Userdefined:

注意项目名，待会引用时会用上。

3.2 字体文件项目

将刚才下载的字体文件添加，并设置生成操作为“Resource”，如下图:

3.3 定义样式

定义样式，使用TextBlock作为图标显示的容器，因此定义一个TextBlock的样式即可，MainWindow.xaml中增加Window.Resources资源，具体代码如下所示。

<Style x:Key="FIcon" TargetType="TextBlock">    <Setter Property="FontFamily" Value="/Userdefined;component/Resources/#iconfont"></Setter>    <Setter Property="Foreground" Value="White"/>    <Setter Property="TextAlignment" Value="Center"/>    <Setter Property="HorizontalAlignment" Value="Center"/>    <Setter Property="VerticalAlignment" Value="Center"/>    <Setter Property="FontSize" Value="20"/></Style>

其中要注意FontFamily属性的设置，/Userdefined;表示的是项目名，#iconfont是字体的名称，下载时的字体名字不能更改，默认是这个，可以通过查看刚才下载的demo_unicode.html文件来查看字体名。

3.4 XAML使用

使用就很简单了，第一种在XAML中使用，如下图，Text的值可以参考2.2.1中的demo_unicode.html，它是字符的Unicode编码。

<StackPanel Orientation="Horizontal">        <TextBlock Text="&#xe624;" Style="{StaticResource FIcon}" FontSize="30" Margin="3" ></TextBlock>        <TextBlock Text="&#xe627;" Style="{StaticResource FIcon}" FontSize="40" Margin="3" ></TextBlock>        <TextBlock Text="&#xe628;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="#FB0AE8"></TextBlock>        <TextBlock Text="&#xe629;" Style="{StaticResource FIcon}" FontSize="60" Margin="3" Foreground="Chartreuse"></TextBlock>        <TextBlock Text="&#xe62d;" Style="{StaticResource FIcon}" FontSize="70" Margin="3" Foreground="#FEDB11"></TextBlock>           </StackPanel>

效果:

3.5 C#代码使用

C#代码唯一不一样的，就是对Unicode字符编码的使用不一样，如：

//代码设置字体图标this.ticon1.Text = "\ue616";

效果: