??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();
        }
    }
}

MaterialSkin.2還有一個比較厲害的地方是它的明暗主題切換不僅僅只用于它自身控件庫中的控件，頁面中的其他控件它也可以強制讓它們跟隨主題變化，通過EnforceBackcolorOnAllComponents屬性：

• EnforceBackcolorOnAllComponents = false

• EnforceBackcolorOnAllComponents = true

小Demo就到這里吧，剩余部分大家可以試著參考項目的源碼自己實現一下。

End

我自己感覺Winform的控件庫里面MaterialSKin.2已經很酷了，我自己的一些Winform項目中也有在用，大家在使用過程中遇到什么問題可以一起交流學習，歡迎大家用我封裝的中文鏈接庫哈，Bye

??如果要在商業行為上使用我封轉了中文字體的庫文件，你必須讓你上級知道引用的控件庫由個人開發出來，未經過專業測試，有可能會存在各種bug的風險，而這些bug需要你們參照源碼進行修復。

總結

以上是生活随笔為你收集整理的Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。