[WPF][Rubyer] 寫一個自己的 UI 庫 (二)

前言

制作 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 里添加標簽

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

回到剛剛 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<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>

最后，附圖

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1738.html

標籤：WPF

上一篇：WPF 使用DrawingVisual和DispatchFrame快速提升繪圖速度

下一篇：使用C#對華為IPC攝像頭二次開發（一）

[WPF][Rubyer] 寫一個自己的 UI 庫 (二) - Icon

前言

1. 添加檔案

2.下載圖示

3.應用圖示

4.修改模板

5.應用