Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）

来源：cnblogs　　作者：MrTedium　　时间：2023/12/13 9:10:23　　对本文有异议

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