[WPF][Rubyer] 寫一個本身的 UI 庫 (二) - Icon

時間 2020-08-21

標籤 wpf rubyer 一個本身 icon 简体版

原文原文鏈接

前言

製做 WPF 的圖標包，主要介紹從 iconfont 下載的圖標包導入到 WPF 使用；json

1. 添加文件

Ruyber 下添加自定義控件(WPF) Icon.cs、類 IconType.cs、類 IconDatas.cs瀏覽器

Rubyer.Themes 下添加資源字典(WPF) Icon.xaml ruby

2.下載圖標

iconfont 查找本身喜歡的圖標包，瀏覽器 F12 => Console => 輸入下列代碼回車，添加全部圖標到購物車app

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) { 
    console.log(span[i].querySelector('span').click());
}

添加到項目dom

下載到本地ide

只解壓 iconfont.ttf 到項目的 Assets 文件目錄下編碼

3.應用圖標

在 BaseStyle.xaml 裏添加標籤spa

<!--IconFont-->
    <FontFamily x:Key="IconFont" >
        pack://application:,,,/Rubyer;component/Assets/#iconfont
    </FontFamily>

回到剛剛 iconfont 的項目下，右鍵 F12 => Console => 輸入下列代碼回車，打印圖標名稱和編碼的對應的 json 數據3d

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 數據，建立文本文件粘貼到內容；保存文件code

新建一個控制檯項目，添加 JsonObject.cs 類

public class JsonObject
{
    public string Name { get; set; }
    public string Code { get; set; }
}

Program.cs 讀取剛剛添加的文本文件到 List<JsonObject>，打印內容所有拷貝粘貼到 IconType.cs，爲全部圖標名稱的枚舉類型

    　　/// <summary>
        /// 從文件加載到對象
        /// </summary>
        /// <typeparam name="T">對象類型</typeparam>
        /// <param name="fileName">文件名路徑</param>
        /// <returns></returns>
        public static T LoadFile2Object<T>(string fileName)
        {
         　　try
            {
                string json = File.ReadAllText(fileName);
                return JsonConvert.DeserializeObject<T>(json);
            }
            catch (Exception)
            {
                return default(T);
            }      
　　　　}

class Program
    {
        static void Main(string[] args)
        {
            var jsonObject = LoadFile2Object<List<JsonObject>>("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("&amp;#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 Dictionary<IconType, string> GetAll() =>
            new Dictionary<IconType, string>
            {
                { 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 控件，本身定義一個模板樣式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:rubyer="clr-namespace:Rubyer">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/Rubyer;component/Themes/BaseStyle.xaml" />
    </ResourceDictionary.MergedDictionaries>
    
    <Style TargetType="{x:Type rubyer:Icon}">
        <Setter Property="Height" Value="20"/>
        <Setter Property="Width" Value="20"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type rubyer:Icon}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Viewbox>
                            <TextBlock FontFamily="{StaticResource IconFont}" 
                                       Text="{Binding Code,RelativeSource={RelativeSource TemplatedParent}}"
                                       Foreground="{TemplateBinding Foreground}"/>
                        </Viewbox>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

主要圖標應用位置，Text 綁定 iconfont 圖標的編碼：

Icon.cs : 自定義控件的內容；

public class Icon : Control
    {
        // 全部圖標鍵值對
        private static readonly Lazy<Dictionary<IconType, string>> _codes = new Lazy<Dictionary<IconType, string>>(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

<ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/Rubyer;component/Themes/Button.xaml" />
        <ResourceDictionary Source="pack://application:,,,/Rubyer;component/Themes/Icon.xaml" />
    </ResourceDictionary.MergedDictionaries>

回到 RubyerDemo ，嘗試使用 Icon 控件，Type 屬性能夠提示I con 枚舉全部類型

<Button Style="{DynamicResource CircleMidButton}">
    <rubyer:Icon Type="Qqchat"/>
</Button>
<Button Style="{DynamicResource CircleLightButton}" rubyer:ButtonHelper.CircleDima="40">
    <rubyer:Icon Type="Wechat" Height="30" Width="30"/>
</Button>
<Button Style="{DynamicResource CircleDarkButton}" rubyer:ButtonHelper.CircleDima="50">
    <rubyer:Icon Type="GithubCircle" Height="40" Width="40"/>
</Button>
<Button Style="{DynamicResource CircleAccentButton}" rubyer:ButtonHelper.CircleDima="60">
    <rubyer:Icon Type="Cookie" Height="50" Width="50"/>
</Button>

最後，附圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。