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

原文: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/#SK2015"></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图标字体

 

版权所有,文章来源:http://www.cnblogs.com/anding

个人能力有限,本文内容仅供学习、探讨,欢迎指正、交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css3 loading 效果1

代码&#xff1a; <!doctype html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Document</title> <style> #box{position: relative;margin: 100px;} #box span{display: block;width: 9px;height: …

类成员函数解析

1、 构造函数&#xff1a; &#xff08;1&#xff09; 定义&#xff1a;是一个特殊的成员函数&#xff0c;名字与类名相同&#xff0c;创建类类型对象时&#xff0c;由编译器自动调用&#xff0c;在对象的生命周期内只且只调用一次&#xff0c;以保证每个数据成员都有一…

add-apt-repository cloud-archive:liberty

apt-get update && apt-get upgrade; v

C++ 继承解析

继承 1、概念&#xff1a; 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能。这样产生新的类&#xff0c;称派生类。继承呈现了面向对象程序设计的层次结构&#xff0c;体…

[傅里叶变换及其应用学习笔记] 九. 继续卷积的讨论

这份是本人的学习笔记&#xff0c;课程为网易公开课上的斯坦福大学公开课&#xff1a;傅里叶变换及其应用。 卷积在滤波中的应用 浑浊度&#xff08;Turbidity&#xff09;研究是关于测量水的清澈度的研究。大致方法是把光传感器放置到深水区域&#xff0c;然后测量光线的昏暗程…

C++多态相关关问题及虚表剖析

关于C多态的问题&#xff1a;&#xff08;基于Visual Studio 2012编译器&#xff09; 一、多态引入 1、对象的类型&#xff1a; &#xff08;1&#xff09; 静态的类型&#xff1a;对象声明时的类型&#xff0c;在编译的时候确定 &#xff08;2&#xff09; 动态的类型&…

C++调用约定

<div class"markdown_views"><p>有一定C开发经验的人一定对”__cdecl、__stdcall、__fastcall”肯定不陌生吧&#xff01;但你真正理解了吗&#xff1f;是的&#xff0c;我曾在这采了无数个坑&#xff0c;栽了无数个跟头&#xff0c;终于忍无可忍要把它总…

C++动态绑定及返回类型协变

C多态之动态绑定&#xff1a; 1、概念&#xff1a;在程序执行期间(非编译期)判断所引用对象的实际类型&#xff0c;根据其实际类型调用相应的方法。 使用virtual关键字修饰类的成员函数时&#xff0c;指明该函数为虚函数&#xff0c;派生类需要重新实现&#xff0c;编译器将实…

使用ucontext组件实现的coroutine代码分析

coroutine一般翻译过来就是协程&#xff0c;类似于线程可以切换&#xff0c;而跟线程是由操作系统调度器来实现切换不一样&#xff0c;协程由用户程序自己调度进行切换。我以前也看过协程相关的内容&#xff0c;但没有自己去实现过。最近搞OpenStack&#xff0c;OpenStack各个模…

C++模板剖析:函数模板、类模板解析

C中关于模板&泛型编程问题&#xff1a; 问题引入&#xff1a;何编写一个通用加法函数&#xff1f; &#xff08;1&#xff09;使用函数重载&#xff0c;针对每个所需相同行为的不同类型重新实现它 int Add(const int &_iLeft, const int&_iRight) { return (_iL…

Android Studio 1.1的安装和遇到的坑

Google的Android Studio 出1.0稳定版本也有很久的时间了&#xff0c;一直喜欢Jetbrains公司的IDE&#xff0c;不同语言的IDE操作习惯都比较统一。 而Android Studio 是基于IntelliJ IDEA的社区版开发的 &#xff0c;怎么也要尝尝鲜才行。 今天安装了下&#xff0c;被几个小坑卡…

BestCoder Round #39 解题报告

现场只做出前三题w 不过不管怎样这既是第一次认真打BC 又是第一次体验用在线编译器调代码 订正最后一题花了今天一整个下午&#xff08;呜呜 收获还是比较大的^_^ Delete wld有n个数(a1,a2,...,an)&#xff0c;他希望进行k次删除一个数的操作&#xff0c;使得最后剩下的n−k个数…

linux :vim 实现命令行下输出进度条

1、 进度条原理&#xff1a; 进度条的的动态增长是利用人的视觉短暂停留效果的&#xff0c;不断从输出缓冲区刷新出相同的内容&#xff0c;在肉眼看来进度条在不断的增长。 在显示器上先输出[# ][%1] 刷新一次之后&#xff0c; …

***jquery选择器 之 获取父级元素、同级元素、子元素

一、获取父级元素1、 parent([expr]): 获取指定元素的所有父级元素 <div id"par_div"><a id"href_fir" href"#">href_fir</a><a id"href_sec" href"#">href_sec</a><a id"href_thr&q…

Sql Server字符串函数

字符串函数用于对字符和二进制字符进行各种操作 1.ASCII()函数 ASCII(character_expression)函数用于返回字符串表达式中最左侧的ASCII代码值。参数character_expression必须是一个char或varchar类型的字符串表达式。 eg: select ASCII(s),ASCII(sql),ASCII(1);执行结果如图:字…

linux 编辑器vim配置

1、 基本配置 对vim进行配置的目的&#xff1a; 进行vim配置&#xff0c;可以让我们在后续敲代码更加方便。按F5可以直接编译并执行C、C代码以及执行shell脚本&#xff1b;按“F8”可进行C、C代码的调试&#xff1b;“Ctrl A”为全选并复制快捷键&#xff0c;方便复…

centos 7上ambari安装试用

2019独角兽企业重金招聘Python工程师标准>>> 1、有三台centos7&#xff0c;名字分别是ws11.localdomain, ws12.localdomain, ws13.localdomain。配置epel源(安装epel-release)。 2、配置root用户ssh无密码访问。 3、安装ntp对时服务。 4、关闭防火墙。centos7下使…

进程管理—进程描述符(task_struct)

本文章转载自&#xff1a;http://blog.csdn.net/qq_26768741/article/details/54348586?locationNum4&fps1 前言 当把一个程序加载到内存当中&#xff0c;此时&#xff0c;这个时候就有了进程&#xff0c;关于进程&#xff0c;有一个相关的叫做进程控制块&#xff08;PCB&…

如何使用emacs编写c语言程序,并编译运行

vi和emacs被分别被称为编辑器之神和神之编辑器。vi的入门精通都很难&#xff0c;emacs入门容易&#xff0c;精通难&#xff1b;vi使用起来不停地切换模式&#xff0c;而emacs则不停地ctrl&#xff0c;meta等组合键。因此&#xff0c;高德纳大师说操作Emacs&#xff0c;就像弹奏…

操作系统中常见的进程调度算法

一、调度与调度算法 调度&#xff1a;操作系统管理了系统的有限资源&#xff0c;当有多个进程&#xff08;或多个进程发出的请求&#xff09;要使用这些资源时&#xff0c;因为资源的有限性&#xff0c;必须按照一定的原则选择进程&#xff08;请求&#xff09;来占用资源。这…