ToB企服应用市场:ToB评测及商务社交产业平台

标题: Winform 巨好看的控件库推荐：MaterialSkin.2 [打印本页]

---

作者: 海哥    时间: 2023-6-28 22:08
标题: Winform 巨好看的控件库推荐：MaterialSkin.2

MaterialSkin.2 控件包是在 MaterialSkin 及基础上二次开发而来的，在原控件基础上修复了一些Bug，丰富了主题以及动画效果，效果非常好。

• MaterialSkin.2 现在处于不活跃状态
  
• 文中用 MaterialSkin 代替 MaterialSkin.2
  

Preview

先贴几张演示Demo中的效果图：





......
Install

在 NuGet 中搜索 MaterialSkin 就能找到控件包，直接安装就行：

注意版本框架

工具箱可能不会显示 MaterialSkin 的控件，需要我们手动添加下：
工具箱 -> 右击：添加选项卡 -> 把 NuGet 安装包里的 DLL 文件拖到选项卡里

简单尝鲜

• 切换使用MaterialForm：
  添加引用：using MaterialSkin.Controls;
  窗体继承换成：public partial class Form1 : MaterialForm
  这个时候切换到设计器就可以看到Material效果的窗体了：
  
  

切换主题以及配色方案

在后台代码中添加一个只读的MaterialSkinManager变量，通过这个变量来控制主题和配色，把ReadMe.md给出的例程调整一下方便后续调整：

1. public partial class Form1 : MaterialForm
2. {
3.   private readonly MaterialSkinManager materialSkinManager;   
4.   public Form1()
5.   {
6.     InitializeComponent();
8.     materialSkinManager = MaterialSkinManager.Instance;        // 初始化 MaterialSkinManager 实例
9.     materialSkinManager.AddFormToManage(this);        // 将要应用 Material Design 的窗体添加到管理列表中
10.     materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;        // Theme 属性用来设置整体的主题
11.     materialSkinManager.ColorScheme = new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE);        // ColorScheme 属性来设置配色方案
12.   }
13. }

复制代码

上面代码写完运行程序就会是我们配置的配色及主题：

MaterialSkinManager主要是通过Themes以及ColorScheme来控制页面的显示效果，前者控制主题，后者控制配色：

• Themes主要是用来切换深色和浅色主题的，对应LIGHT和DARK
  
• ColorScheme主要是用来调整页面的配色方案的，它的构造函数提供了两种不同的重载形式，用于创建颜色方案：
  
  
  
  • 1. public ColorScheme(Primary primary, Primary darkPrimary, Primary lightPrimary, Accent accent, TextShade textShade)

    复制代码
    这个构造函数接受 Primary 和 Accent 枚举类型作为参数，用于指定主颜色和强调色。Primary 枚举包含一系列预定义的主颜色，而 Accent 枚举包含一系列预定义的强调色。此构造函数还接受 TextShade 枚举类型的参数，用于指定文本的明暗色调。通过使用这个构造函数，你可以轻松地选择 颜色方案的不同变体。[例程中使用的就是这个重载]
    
  • 1. public ColorScheme(Color primary, Color darkPrimary, Color lightPrimary, Color accent, TextShade textShade)

    复制代码
    这个构造函数接受 Color 类型的参数，用于直接指定自定义的颜色。你可以传入具体的颜色对象作为参数，以定义主颜色、深色主颜色、浅色主颜色、强调色以及文本明暗色调。
    
  先看主题，创建一个改变主题的MaterialButton实现深色和浅色主题的切换了:
  
  

1. private void btn_ChangeTheme_Click(object sender, EventArgs e)
2. {
3.     materialSkinManager.Theme = materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? MaterialSkinManager.Themes.LIGHT : MaterialSkinManager.Themes.DARK;
4. }

复制代码

再看配色方案，在此之前我们先在页面上随便加一些控件便于显示配色效果：

更改配色方案：

1. private int colorSchemeIndex;   // 通过更换次数，方便循环更换颜色
3. private void btn_SwitchColor_Click(object sender, EventArgs e)
4. {
5.     colorSchemeIndex++;
6.     if (colorSchemeIndex == 6)
7.     {
8.         colorSchemeIndex = 0;
9.     }
10.     SwitchColor(colorSchemeIndex);
11. }
13. private void SwitchColor(int colorSchemeIndex)
14. {
15.     switch (colorSchemeIndex)
16.     {
17.         case 0:
18.             materialSkinManager.ColorScheme = new ColorScheme(
19.                 materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? Primary.Teal500 : Primary.Indigo500,
20.                 materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? Primary.Teal700 : Primary.Indigo700,
21.                 materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? Primary.Teal200 : Primary.Indigo100,
22.                 Accent.Pink200,
23.                 TextShade.WHITE);
24.             break;
25.         case 1:
26.             materialSkinManager.ColorScheme = new ColorScheme(
27.                 Primary.Green600,
28.                 Primary.Green700,
29.                 Primary.Green200,
30.                 Accent.Red100,
31.                 TextShade.WHITE);
32.             break;
33.         case 2:
34.             materialSkinManager.ColorScheme = new ColorScheme(
35.                 Primary.BlueGrey800,
36.                 Primary.BlueGrey900,
37.                 Primary.BlueGrey500,
38.                 Accent.LightBlue200,
39.                 TextShade.WHITE);
40.             break;
41.         case 3:
42.             materialSkinManager.ColorScheme = new ColorScheme(
43.                 Primary.Red800,
44.                 Primary.Red900,
45.                 Primary.Red500,
46.                 Accent.Green200,
47.                 TextShade.WHITE);
48.             break;
49.         case 4:
50.             materialSkinManager.ColorScheme = new ColorScheme(
51.                 Primary.Yellow800,
52.                 Primary.Yellow900,
53.                 Primary.Yellow500,
54.                 Accent.DeepOrange200,
55.                 TextShade.WHITE);
56.             break;
57.         case 5:
58.             materialSkinManager.ColorScheme = new ColorScheme(
59.                 Primary.DeepOrange800,
60.                 Primary.DeepOrange900,
61.                 Primary.DeepOrange500,
62.                 Accent.Yellow200,
63.                 TextShade.WHITE);
64.             break;
65.         case 6:
66.             materialSkinManager.ColorScheme = new ColorScheme(
67.                 Primary.Lime800,
68.                 Primary.Lime900,
69.                 Primary.Lime500,
70.                 Accent.Green200,
71.                 TextShade.WHITE);
72.             break;
73.     }
74.     Invalidate(); // 重绘控件
75. }

复制代码

配色是Github上Example以及用户issue里的配色方案，大家如果要用的话，可以参考：Material Skin 指南 中文翻译文档

看看效果：

MaterialSkin实现了很丰富的动画效果，But...

默认的蓝粉配色就已经很好看了，大家如果有什么酷炫帅气的配色方案，欢迎在评论区留言交流！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4