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,一经查实,立即删除!

相关文章

从菜鸟到伟大的征程

自我介绍&#xff1a; 我是carol&#xff0c;现在是一名菜鸟程序员&#xff0c;我励志成为像尼奥那样的hacker&#xff0c;尽管有很多的不现实性&#xff0c;但是丝毫不减我对于这方面的热情。其实&#xff0c;说到底我并不是很 喜欢编程&#xff0c;尤其是现在的编程方式&…

Linux下快速搭建DNS服务器

一、术语解释:TTL Time To Live 缓冲保留时间ORIGIN 属于哪个域 代指域IN 开头需要空格SOA 一行记录类型的开始参数&#xff1a;forwarders {} 指向自己无法解析的域名跳转到外部dns服务测试方法&#xff1a;host 域名&#xff08;host IP&#xff09; 使用nslookup方法测试 使…

IOS

http://blog.csdn.net/zc639143029/article/details/47112179转载于:https://www.cnblogs.com/redasurc/p/5007986.html

解决Cacti监控图像断断续续问题

最近cacti的图像全都是断断续续。新加的设备&#xff0c;图像也是这样&#xff0c;查看cacti 的log发现大量下面类似的错误信息&#xff1a;04/12/2011 03:54:37 PM - SPINE: Poller[0] Host[233] DS[4990] WARNING: SNMP timeout detected [500 ms], ignoring host 192.168.2.…

LintCode: Search A 2d Matrix

1. 设查找的数位y&#xff0c;第一行最后一列的数位x 如果x<y&#xff0c;x是第一行最大的&#xff0c;所以第一行都小于y&#xff0c;删除第一行&#xff1b; 如果x>y&#xff0c;x是最后一列最小的&#xff0c;所以最后一列都大于y&#xff0c;删除最后一列&#xff1b…

C++ this 指针

This 指针&#xff1a;this 是C中的一个关键字&#xff0c;也是一个常量指针&#xff0c;指向当前对象&#xff08;具体说是当前对象的首地址&#xff09; 。通过 this&#xff0c;可以访问当前对象的成员变量和成员函数 。 Student Stu ; //通过Student类创建对象 Stu Stude…

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: …

计算几何 - XOJ 1171 线段求交

问题 Description 线段求交即给定一组线段求出这些线段的相交情况&#xff0c;它是计算几何的基础问题之一,有着广泛的应用. Input第一行为一个正整数n表示线段的个数&#xff08;n<10000&#xff09;第二行到第n1行每行包括4个正整数x1,y1,x2,y2, (0 < x1,y1,x2,y2 <…

类成员函数解析

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

微信开发学习日记(六):weiphp框架

最近重点在看weiphp这个开源的第三方微信公众平台框架。在网上找微信资料&#xff0c;找到了这个。很早之前&#xff0c;就初步学习了Thinkphp和Onethink2个开源框架&#xff0c;当看到weiphp是用这2个框架开发的时候&#xff0c;我就更愿意去学习&#xff0c;毕竟学习成本很低…

SVN常用命令备注

1、将文件checkout到本地目录 svn checkout path&#xff08;path是服务器上的目录&#xff09; 例如&#xff1a;svn checkout svn://192.168.1.1/pro/domain 简写&#xff1a;svn co 2、往版本库中添加新的文件 svn add file 例如&#xff1a;svn add test.php(添加test.php)…

add-apt-repository cloud-archive:liberty

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

日期类Date

#include <iostream>using namespace std;//日期是否合法//日期比较//两个日期中间差的天数//日期加上或减去一定的天数后的日期class Date{friend ostream& operator<<(ostream& _cout, const Date& d);friend istream& operator>>(istream…

Linux下编译安装Apache httpd 2.4

Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨平台和安全性被广泛使用&#xff0c;是最流行的Web服务器端软件之一。当前Apache版本为2.4&#xff0c;本文主要描述基于CentOS 6.5以源码方式安装Apache httpd。 一…

选取硬币问题

有1元&#xff0c;5元&#xff0c;10元&#xff0c;50元&#xff0c;100元&#xff0c;500元的硬币各c0,c1,c2,c3,c4, c5枚 现在要使用这些硬币支付n元&#xff0c;问最少需要多少枚硬币&#xff0c;假设至少存在一种方案。 应该尽可能使用500元的&#xff0c;然后再使用100元的…

SAP OBYC自动记账的实例说明 +VALUE STRING

对Value String定义&#xff1a;定义了一系列的步骤优先顺序&#xff0c;每一个步骤都连接到不同的过账事务码&#xff0c;而这个顺序本身就称作价值串。价值串你可以看作是一种记账的规则&#xff0c;为物料移动或者发票校验包含了一系列的科目分配特征。并且物料移动的科目确…

C++ 继承解析

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

javascript window.open

翻译原文&#xff1a;open methodOpens a new window and loads the document specified by a given URL.Navigates the app window to the specified location.Syntaxvar retval window.open(url, name, features, replace);Parametersurl [in, optional] Type: String …

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

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

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

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