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

一．图标字体

　　图标字体在网页开发上运用很是普遍，具体能够网络搜索了解，网页上的运用有不少例子，如Bootstrap。但在C/S程序中使用还很少，字体图标其实就是把矢量图形打包到字体文件里，就像使用通常外置字体同样的使用，所以Winform、WPF中都是能够用的。

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

• 网上开源字体图标不少，很容易获取，项目开发中须要的绝大部分图标均可以找到，很是方便，推荐 阿里巴巴开源字体；
• 字体文件很是小，比使用png等图片文件要小不少；
• 比使用普通图片资源性能要好不少；
• 和普通字体同样，是矢量的，可任意放大缩小（设置字体大小）不失真。
• 惟一的缺点就是颜色的设置有局限，只能用单色，或者使用画刷实现渐变色等效果。不过这一点貌似问题也不大。

二．WPF中如何使用字体图标

2.1 字体文件加入到项目资源

　　下载字体文件（参考第三节），添加到项目中，并设置生成操做为"Resource"，以下图：

　　

2.2 定义样式

　　定义样式，使用TextBlock做为图标显示的容器，所以定义一个TextBlock的样式便可，以下所示。其中“SK2015” 为字体名称，如3.2中的图示，能够经过“编辑项目”修改字体名称。

 1 <!--FIcon--> 
 2 
 3  <Style x:Key="FIcon" TargetType="TextBlock"> 
 4 
 5  <Setter Property="FontFamily" Value="/K.Framework.Controls;component/Resources/#SF2015"></Setter> 
 6 
 7  <Setter Property="Foreground" Value="{StaticResource TextForeground}"/> 
 8 
 9  <Setter Property="TextAlignment" Value="Center"/> 
10 
11  <Setter Property="HorizontalAlignment" Value="Center"/> 
12 
13  <Setter Property="VerticalAlignment" Value="Center"/> 
14 
15  <Setter Property="FontSize" Value="20"/> 
16 
17  </Style> 

2.3 XAML使用示例

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

        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xe600;" Style="{StaticResource FIcon}" FontSize="30" Margin="3" ></TextBlock>
            <TextBlock Text="&#xe61c;" Style="{StaticResource FIcon}" FontSize="40" Margin="3" ></TextBlock>
            <TextBlock Text="&#xe63d;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="#FB0AE8"></TextBlock>
            <TextBlock Text="&#xe602;" Style="{StaticResource FIcon}" FontSize="60" Margin="3" Foreground="Chartreuse"></TextBlock>
            <TextBlock Text="&#xe60c;" Style="{StaticResource FIcon}" FontSize="70" Margin="3" Foreground="#FEDB11"></TextBlock>
        </StackPanel>

　　效果：

　　

　　直接使用字符编码可能很差记，web开发中会为每一个字体图标定义一个好记的名称，如<i class="icon book"></i>。他是利用css定义的样式实现的，在WPF中固然也是能够实现的，为每一个字体图标单独定义Style便可。只是我以为没有必要，这样也挺简单的，有网页demo.html能够对照。

2.4 C#代码使用示例

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

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

　　效果：

　　

三 .如何下载字体文件

3.1 下载网上的开源字体库

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

　　

3.2 Iconfont-阿里巴巴矢量图标库

　　地址：http://www.iconfont.cn/

　　提供了大量的字体图标（包括网友共享的），能够选择须要的字体，而后打包到一个字体文件，且能够随意修改字符的编码、字体名称等，真的是一个良心的开源项目。

　　收集并下载图标字体库，以下图。

　　

　　下载后，以下图，其中*.ttf就是咱们须要的字体文件，其余是网页使用须要的，demo.html能够做为图例参考，demo.html内容同上图相似。

　　

附录：参考引用

作小图标还用sprite图？你out了！史上最简单易懂iconfont使用教程

学习WPF——使用Font-Awesome图标字体

系列文章目录   

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

WPF自定义控件与样式(2)-自定义按钮FButton

WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式

WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu

WPF自定义控件与样式(10)-进度控件ProcessBar自定义样 

WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现

WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox

WPF自定义控件与样式(14)-轻量MVVM模式实践 

WPF自定义控件与样式(15)-终结篇

 

版权全部，文章来源：http://www.cnblogs.com/anding

我的能力有限，本文内容仅供学习、探讨，欢迎指正、交流。