1 图标字体概述
我们知道,在日常的界面开发中,为了达到更好的美观度,需要UI设计人员进行合理的布局,并用相关的图标来丰富和美化界面。之前,应用程序上的图形多是位图,它有一个缺点就是在界面进行缩放时,会出现锯齿情况,图片会模糊,这样对于用户体验来说,是比较差的。因此,最近几年,多数应用都在采用一种矢量图图标,且它作为一种字体,可以非常方便进行整合,当使用某个图标时,只需要通过文本进行制定具体的图标编码即可使用,这里比较熟知的有Font Awesome。它给我们提供了一套可缩放的矢量图标字体,它可以被指定大小、颜色、阴影以及任何可以用CSS进行定义的样式。
Font Awesome网址为 : http://www.fontawesome.com.cn/ ,它具备如下的好处:
2 WPF 图标字体
从上述的 Font Awesome字体的优势来说,它兼容桌面级应用,因此也适合于WPF。首先,我们需要将Font Awesome字体下载到本地,并拷贝到WPF项目中,这里放于Fonts目录中,如下图所示:
其次,需要设置字体文件的【生成操作】为资源,这样应用程序才能按照路径找到该字体文件,如下图所示:
再次,定义一个Style样式文件IconFont.xaml,它用于指定Font Awesome字体,这样方便重用,介绍过多的重复代码拷贝,具体示例代码如下:
<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:Yd.WpfControls"><Stylex:Key="IconFont"TargetType="TextBlock"><SetterProperty="FontFamily"Value="/Yd.WpfControls;component/Fonts/#dticonfont"></Setter><SetterProperty="Foreground"Value="{x:Static local:FlatColors.CLOUDS}"/><SetterProperty="TextAlignment"Value="Center"/><SetterProperty="HorizontalAlignment"Value="Center"/><SetterProperty="VerticalAlignment"Value="Center"/><SetterProperty="FontSize"Value="20"/></Style><Stylex:Key="faFont"TargetType="TextBlock"><SetterProperty="FontFamily"Value="/Yd.WpfControls;component/Fonts/#FontAwesome"></Setter><SetterProperty="Foreground"Value="{x:Static local:FlatColors.CLOUDS}"/><SetterProperty="TextAlignment"Value="Center"/><SetterProperty="HorizontalAlignment"Value="Center"/><SetterProperty="VerticalAlignment"Value="Center"/><SetterProperty="FontSize"Value="20"/></Style></ResourceDictionary>
其中第一部分为iconFont字体,第二个部分为Font Awesome字体,它的Key是faFont,目标控件类型为TextBlock。
注意:字体中路径是有前缀的,格式为 /Yd.WpfControls;component/Fonts/#字体名 ,#后面是字体名,而不是字体文件名,具体的字体名称可以双击字体文件进行安装,安装界面会显示字体的名称。
最后,我们就可以在其他样式文件中引入该字体了,比如FlatCheckBox.xaml是另外一个控件的样式,这个文件中通过如下代码进行引入:
<ResourceDictionary.MergedDictionaries><ResourceDictionarySource="/Yd.WpfControls;component/Style/IconFont.xaml"/></ResourceDictionary.MergedDictionaries>
<TextBlockx:Name="icon"Text=""Style="{StaticResource faFont}"FontSize="26"/>