WPF自定义控件02:字体图标支持

简介: 最近几年,多数应用都在采用一种矢量图图标,且它作为一种字体,可以非常方便进行整合,当使用某个图标时,只需要通过文本进行制定具体的图标编码即可使用,这里比较熟知的有Font Awesome。它给我们提供了一套可缩放的矢量图标字体,它可以被指定大小、颜色、阴影以及任何可以用CSS进行定义的样式。

1 图标字体概述


    我们知道,在日常的界面开发中,为了达到更好的美观度,需要UI设计人员进行合理的布局,并用相关的图标来丰富和美化界面。之前,应用程序上的图形多是位图,它有一个缺点就是在界面进行缩放时,会出现锯齿情况,图片会模糊,这样对于用户体验来说,是比较差的。因此,最近几年,多数应用都在采用一种矢量图图标,且它作为一种字体,可以非常方便进行整合,当使用某个图标时,只需要通过文本进行制定具体的图标编码即可使用,这里比较熟知的有Font Awesome。它给我们提供了一套可缩放的矢量图标字体,它可以被指定大小、颜色、阴影以及任何可以用CSS进行定义的样式。

  Font Awesome网址为 : http://www.fontawesome.com.cn/ ,它具备如下的好处:

1.jpg

2 WPF 图标字体


    从上述的 Font Awesome字体的优势来说,它兼容桌面级应用,因此也适合于WPF。首先,我们需要将Font Awesome字体下载到本地,并拷贝到WPF项目中,这里放于Fonts目录中,如下图所示:

2.jpg

其次,需要设置字体文件的【生成操作】为资源,这样应用程序才能按照路径找到该字体文件,如下图所示:

3.jpg

  再次,定义一个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="&#xf0c8;"Style="{StaticResource faFont}"FontSize="26"/>


相关文章
WPF自定义控件05:ToggleButton
本文重点介绍WPF中如何实现自定义ToggleButton控件,它是一个开关控件,通过单击来进行状态的快速切换。
5171 0
WPF自定义控件05:ToggleButton
|
人工智能 C#
WPF自定义控件库之Window窗口
本文以自定义窗口为例,简述WPF开发中如何通过自定义控件来扩展功能和样式,仅供学习分享使用,如有不足之处,还请指正。
259 5
|
XML C# 数据格式
WPF中用户控件和自定义控件
无论是在WPF中还是WinForm中,都有用户控件(UserControl)和自定义控件(CustomControl),这两种控件都是对已有控件的封装,实现功能重用。但是两者还是有一些区别,本文对这两种控件进行讲解。
|
数据可视化 前端开发 C#
WPF自定义控件的三种方式
某些场景下,我们确实需要创建新的控件。此时,理解 WPF不同控件的创建方法就显得非常重要。 WPF 提供3个用于创建控件的方法,每个方法都提供不同的灵活度。
909 1
WPF自定义控件的三种方式
|
C# 容器
WPF自定义控件10:FlatListView
在不少的应用程序中,有时候需要使用ListView控件来显示一组集合数据,这样可以从一组数据中进行选择,让数据更加的规范,便于统计和分析。本文将介绍一下自定义的列表控件FlatListView,它与FlatCheckBox实现过程非常类似,它是继承自ListView,但使用自定义的UI样式来美化界面。
591 0
WPF自定义控件10:FlatListView
WPF自定义控件09:FlatWaveButton
按钮在很多应用程序中都是必不可少的控件,如果给按钮控件添加一些动画效果,比如单击它后会显示一个水波纹扩散的动画效果,那么感觉上更加的高级。本文将介绍一下自定义水波纹按钮控件FlatWaveButton,它是一个UserControl(FlatButton)控件,自身携带UI样式和后台逻辑。
660 0
WPF自定义控件09:FlatWaveButton
|
Web App开发 C#
WPF自定义控件08:FlatRoundImage
在不少的应用程序中,用户中心的个人页面经常需要显示头像,这个当前主流的做法就是用户上传一个图片,系统进行截取并显示为一个圆形的轮廓,即圆形的照片。本文将介绍一下自定义的图片控件FlatRoundImage,它是一个UserControl控件,自身携带UI样式和后台逻辑。
660 0
WPF自定义控件08:FlatRoundImage
WPF自定义控件07:FlatTextBox
本文将介绍一下自定义的文本框控件FlatTextBox,它与FlatCheckBox实现过程非常类似,它是继承自TextBox,但使用自定义的UI样式来美化界面,并添加了特有的一些依赖属性。
543 0
WPF自定义控件07:FlatTextBox
WPF自定义控件06:FlatComboBox
在不少的应用程序中,经常需要使用下拉框(ComboBox)控件来从类别字段中选择,这样可以限定值的范围,让数据更加的规范,便于统计和分析。本文将介绍一下自定义的下拉框控件FlatComboBox,它与FlatCheckBox实现过程非常类似,它是继承自ComboBox,但使用自定义的UI样式来美化界面。下面将详细介绍具体的实现细节。
844 0
WPF自定义控件06:FlatComboBox
WPF自定义控件04:FlatRadioButton
本文通过在WPF中引入Font Awesome图标字体来实现自定义FlatRadioButton控件的UI绘图。用户只需要在窗体上引入自定义的FlatRadioButton控件即可使用具有Flat UI效果的控件,非常方便。
619 0
WPF自定义控件04:FlatRadioButton