前言
制作 WPF 的图标包,主要介绍从 iconfont 下载的图标包导入到 WPF 使用;
1. 添加文件
Ruyber 下添加 自定义控件(WPF) Icon.cs、类 IconType.cs、类 IconDatas.cs
Rubyer.Themes 下添加 资源字典(WPF) Icon.xaml
2.下载图标
iconfont 查找自己喜欢的图标包,浏览器 F12 => Console => 输入下列代码回车,添加所有图标到购物车
var span = document.querySelectorAll('.icon-cover');for (var i = 0, len = span.length; i < len; i++) { console.log(span[i].querySelector('span').click());}
添加到项目
下载到本地
只解压 iconfont.ttf 到项目的 Assets 文件目录下
3.应用图标
在 BaseStyle.xaml 里添加标签
pack://application:,,,/Rubyer;component/Assets/#iconfont
回到刚刚 iconfont 的项目下,右键 F12 => Console => 输入下列代码回车,打印图标 名称 和 编码的对应的 json 数据
var allIcon = document.querySelectorAll('[class^=J_icon_id]');var iconJson = [];console.log(allIcon[0].querySelector('.icon-name').innerHTML)for (var i = 0, len = allIcon.length; i < len; i++) { iconJson[i] = ({'name':allIcon[i].querySelector('.icon-name').innerHTML,'code':allIcon[i].querySelector('.icon-code').innerHTML}); }console.log(iconJson)
打印完右键 json 变量 => store as global variable, 生成 temp1,输入 copy(temp1),拷贝整个 json 数据,创建文本文件粘贴 到 内容; 保存文件
新建一个控制台项目,添加 JsonObject.cs 类
public class JsonObject{ public string Name { get; set; } public string Code { get; set; }}
Program.cs 读取刚刚添加的 文本文件 到 List
////// 从文件加载到对象 /// ///对象类型 /// 文件名路径 ///public static T LoadFile2Object (string fileName) { try { string json = File.ReadAllText(fileName); return JsonConvert.DeserializeObject (json); } catch (Exception) { return default(T); } }class Program { static void Main(string[] args) { var jsonObject = LoadFile2Object >("IconJson.txt"); #region 添加 IconType int count = 0; foreach (var item in jsonObject) { //Console.WriteLine($"name:{item.Name},code:{item.Code}"); var names = item.Name.Trim().Split(' ', '-'); var name = ""; for (int i = 0; i < names.Length; i++) { if (names[i] == " " || names[i] == "") continue; name += names[i].Substring(0, 1).ToUpper() + names[i].Substring(1); } count++; Console.WriteLine($"{name},"); } #endregion Console.ReadLine(); } }
IconType.cs:
public enum IconType{ BookMinus, Cookie, FormatBold, LedOutline, Pin, Speedometer, Web, BookMultiple, Copyright, ...}
注释掉上面 #region 添加 IconType 的内容,换成下面的代码, 打印出 IconDatas.cs 的内容, 打印内容全部拷贝 粘贴 到 IconDatas.cs,为枚举对应的图标代码
#region 添加 IconDatas int count = 0; foreach (var item in jsonObject) { var names = item.Name.Trim().Split(' ', '-'); var name = ""; var code = item.Code.Replace("&#x", "\\u").Replace(";", ""); for (int i = 0; i < names.Length; i++) { if (names[i] == " " || names[i] == "") continue; name += names[i].Substring(0, 1).ToUpper() + names[i].Substring(1); } count++; //{ IconType.SafetyCertificate, "\ue7f5"} Console.WriteLine($"{{ IconType.{name},\"{code}\"}},"); } #endregion
IconDatas.cs:
namespace Rubyer{ internal class IconDatas { public static DictionaryGetAll() => new Dictionary { { IconType.BookMinus,"\ue6db"}, { IconType.Cookie,"\ue7db"}, { IconType.FormatBold,"\ue8db"}, { IconType.LedOutline,"\ue9db"}, { IconType.Pin,"\ueadb"}, { IconType.Speedometer,"\uebdb"}, { IconType.Web,"\uecdb"}, { IconType.BookMultiple,"\ue6dc"}, { IconType.Copyright,"\ue7dc"}, ... } }}
4.修改模板
Icon.xaml:WPF 没有 Icon 控件,自己定义一个模板样式
主要图标应用位置,Text 绑定 iconfont 图标的编码:
Icon.cs : 自定义控件 的内容;
public class Icon : Control { // 所有图标键值对 private static readonly Lazy> _codes = new Lazy >(IconDatas.GetAll()); static Icon() { DefaultStyleKeyProperty.OverrideMetadata(typeof(Icon), new FrameworkPropertyMetadata(typeof(Icon))); } public override void OnApplyTemplate() { base.OnApplyTemplate(); UpdateIcon(); } // 图标类型 public IconType Type { get { return (IconType)GetValue(TypeProperty); } set { SetValue(TypeProperty, value); } } public static readonly DependencyProperty TypeProperty = DependencyProperty.Register("Type", typeof(IconType), typeof(Icon), new PropertyMetadata(default(IconType), TypePropertyChangedCallBack)); private static void TypePropertyChangedCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((Icon)d).UpdateIcon(); } // 图标编码 public string Code { get { return (string)GetValue(CodeProperty); } set { SetValue(CodeProperty, value); } } public static readonly DependencyProperty CodeProperty = DependencyProperty.Register("Code", typeof(string), typeof(Icon), new PropertyMetadata("")); // 更新图标 private void UpdateIcon() { string code = null; _codes.Value?.TryGetValue(Type, out code); Code = code; } }
5.应用
在 Rubyer,引用 Icon.xaml
回到 RubyerDemo ,尝试使用 Icon 控件,Type 属性 可以提示I con 枚举所有类型
最后,附图
[WPF][Rubyer] 写一个自己的 UI 库 (二)
文章转载:http://www.shaoqun.com/a/464661.html