Winform 控制元件庫 MaterialSkin.2 使用教程（鴻蒙字型版）

MrTedium發表於2023-12-12

ℹ️MaterialSkin.2 控制元件庫在之前的文章中已經介紹過了，就不囉嗦了 - > Winform 好看控制元件庫推薦：MaterialSkin.2

ℹ️官方庫裡使用的是 Google 的 Robot 字型，印象裡它好像是隨著 Android 4.0 一塊釋出的一款開源字型，對中文的顯示效果不是很友好，之前更新了思源黑體的版本，中文好看了一點，但是不多，感覺當時選用的字型檔案有點問題，顯示效果沒有想象中好，而且上次的 dll 檔案很大，所以改了一個使用 HarmonyOS Sans SC 字型的版本，顯示效果要比之前思源黑體好很多。

Overview

換字型後的效果：

主頁：
按鈕樣式
文字框
表格
進度條
文字標籤

感覺鴻蒙字型通用性蠻好的，中英文混排效果都不錯，文字多了以後也很清爽，同時MaterialSkin.2控制元件庫的設計也足夠美觀，唯一的缺點就原作者不更新了，但是最近作者釋出了一個issue來尋找願意繼續維護控制元件庫的，大家有興趣的話可以去留言回覆：傳送門

更改鴻蒙字型後的dll檔案以及演示Demo還有專案原始碼都已經上傳至 Github：傳送門

百度網盤地址：

連結: https://pan.baidu.com/s/1DfGntuLXNet9C7yMA7zdQw 提取碼: qdz6

Simple Tutorial

這裡教一下大家怎樣自己實現一個上面演示 Demo 裡的側邊欄：

新建一個Winform(.NET Framework)專案，教程內容選用 Framework 4.6.1 ，引入 MaterialSkin.dll 檔案，步驟就不貼圖了，建好專案以後右鍵引用=>新增引用=>瀏覽=>找到dll檔案新增就OK了：

窗體樣式

為窗體引入名稱空間：using MaterialSkin.Controls;
為窗體繼承 MaterialForm

using MaterialSkin.Controls;

namespace WindowsFormsApp1
{
    public partial class Form1 : MaterialForm
    {
        public Form1()
        {
            InitializeComponent();
        }
    }
}

看一下工具箱裡有沒有生成MaterialSkin.2的控制元件，沒有的話手動新增一下。

側邊欄

側邊欄的原理是透過給窗體繫結一個TabControl來實現的，原生的TabControl也是可以的，我這裡就還是用控制元件庫的MaterialTabControl：

新增需要展示的標籤頁：

然後選中窗體，它有一個Drawer屬性集合，裡面有一個DrawerTabControl屬性，在這裡繫結上選項卡，然後一個簡單的側邊欄就OK了：

上面Demo裡主頁的一些配置相都是透過修改Drawer裡面的一些屬性完成的，這個大家可以下來自己調：

然後來實現Demo左側側邊欄的圖示，這個是透過給繫結的TabControl的各個標籤新增圖片完成的，在他的原始碼裡是給TabControl繫結了一個ImageList然後透過ImageKey來完成的，你也可一個標籤一個標籤的新增圖片，都可以。我這裡同樣使用Imagelist，拖一個到設計器：

圖片可以用你已有的素材，我習慣到 iconfont 上找，當然了圖示也不要太花哨了，最好是線性、手繪或者簡約的，太複雜的顯示效果就不好了，我這裡選了兩張，然後下載至本地（下載PNG），然後新增到ImageList裡：

之後繫結ImageList到TabControl裡，給每個標籤設定圖片就可以了：

大家如果感興趣的話可以研究下它的MaterialSkinExample的原始碼，基本上每個控制元件如何使用以及常用屬性在原始碼中都有體現。

顏色及明暗主題切換

把Demo裡的主頁簡單實現一下，主題樣式改變主要透過控制元件庫的MaterialSkinManager來實現，需要你預先定義好一些主題顏色，將視窗新增到管理器中：

using MaterialSkin;
using MaterialSkin.Controls;

namespace WindowsFormsApp1
{
    public partial class Form1 : MaterialForm
    {
        private readonly MaterialSkinManager materialSkinManager;
        public Form1()
        {
            InitializeComponent();

            // 初始化 MaterialSkinManager
            materialSkinManager = MaterialSkinManager.Instance;

            // 強制改所有元件的背景色，否則會阻
            materialSkinManager.EnforceBackcolorOnAllComponents = true;

            // 將視窗新增到 MaterialSkinManager ，並設定主題
            materialSkinManager.AddFormToManage(this);
            materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;
            materialSkinManager.ColorScheme = new ColorScheme(Primary.Indigo500, Primary.Indigo700, Primary.Indigo100, Accent.Pink200, TextShade.WHITE);
        }
        
        // 明暗主題切換
        private void materialButton2_Click(object sender, System.EventArgs e)
        {
            materialSkinManager.Theme = materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? MaterialSkinManager.Themes.LIGHT : MaterialSkinManager.Themes.DARK;
            updateColor();
        }
        private int colorSchemeIndex;

        // 主題顏色切換
        private void materialButton1_Click(object sender, System.EventArgs e)
        {
            colorSchemeIndex++;
            if (colorSchemeIndex > 2)
                colorSchemeIndex = 0;
            updateColor();
        }

        private void updateColor()
        {
            //These are just example color schemes
            switch (colorSchemeIndex)
            {
                case 0:
                    materialSkinManager.ColorScheme = new ColorScheme(
                        materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? Primary.Teal500 : Primary.Indigo500,
                        materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? Primary.Teal700 : Primary.Indigo700,
                        materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? Primary.Teal200 : Primary.Indigo100,
                        Accent.Pink200,
                        TextShade.WHITE);
                    break;

                case 1:
                    materialSkinManager.ColorScheme = new ColorScheme(
                        Primary.Green600,
                        Primary.Green700,
                        Primary.Green200,
                        Accent.Red100,
                        TextShade.WHITE);
                    break;

                case 2:
                    materialSkinManager.ColorScheme = new ColorScheme(
                        Primary.BlueGrey800,
                        Primary.BlueGrey900,
                        Primary.BlueGrey500,
                        Accent.LightBlue200,
                        TextShade.WHITE);
                    break;
            }
            Invalidate();
        }
    }
}