Winform 巨好看的控件库推荐：MaterialSkin.2
MaterialSkin.2 控件包是在 MaterialSkin 及基础上二次开发而来的，在原控件基础上修复了一些Bug，丰富了主题以及动画效果，效果非常好。[*]MaterialSkin.2 现在处于不活跃状态
[*]文中用 MaterialSkin 代替 MaterialSkin.2
Preview
先贴几张演示Demo中的效果图：
https://user-images.githubusercontent.com/77468294/134770847-0f20f37f-e3e7-4e15-b838-cf53b0b32c4e.png
https://user-images.githubusercontent.com/77468294/119880600-b4570480-bf2c-11eb-9a83-e2d59b88bf22.png
https://user-images.githubusercontent.com/77468294/134740844-795cd759-e4dc-4592-b2c1-86896e61f66f.png
https://user-images.githubusercontent.com/77468294/134825517-23f517e7-0793-4c4c-bcb2-6c2c2fb36b4a.png
https://user-images.githubusercontent.com/77468294/119881411-8e7e2f80-bf2d-11eb-9fa3-883eceabfadc.png
......
Install
在 NuGet 中搜索 MaterialSkin 就能找到控件包，直接安装就行：
https://img2023.cnblogs.com/blog/2913706/202303/2913706-20230312160858969-279302733.png
注意版本框架
工具箱可能不会显示 MaterialSkin 的控件，需要我们手动添加下：
工具箱 -> 右击：添加选项卡 -> 把 NuGet 安装包里的 DLL 文件拖到选项卡里
https://img2023.cnblogs.com/blog/2913706/202303/2913706-20230312161859875-1350829922.png
简单尝鲜
[*]切换使用MaterialForm：
添加引用：using MaterialSkin.Controls;
窗体继承换成：public partial class Form1 : MaterialForm
这个时候切换到设计器就可以看到Material效果的窗体了：
https://img2023.cnblogs.com/blog/2913706/202303/2913706-20230312162547346-1828518012.png
切换主题以及配色方案
在后台代码中添加一个只读的MaterialSkinManager变量，通过这个变量来控制主题和配色，把ReadMe.md给出的例程调整一下方便后续调整：
public partial class Form1 : MaterialForm
{
private readonly MaterialSkinManager materialSkinManager;
public Form1()
{
InitializeComponent();
materialSkinManager = MaterialSkinManager.Instance; // 初始化 MaterialSkinManager 实例
materialSkinManager.AddFormToManage(this); // 将要应用 Material Design 的窗体添加到管理列表中
materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT; // Theme 属性用来设置整体的主题
materialSkinManager.ColorScheme = new ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE); // ColorScheme 属性来设置配色方案
}
}上面代码写完运行程序就会是我们配置的配色及主题：
https://img2023.cnblogs.com/blog/2913706/202306/2913706-20230628161257811-438265941.png
MaterialSkinManager主要是通过Themes以及ColorScheme来控制页面的显示效果，前者控制主题，后者控制配色：
[*]Themes主要是用来切换深色和浅色主题的，对应LIGHT和DARK
[*]ColorScheme主要是用来调整页面的配色方案的，它的构造函数提供了两种不同的重载形式，用于创建颜色方案：
[*]public ColorScheme(Primary primary, Primary darkPrimary, Primary lightPrimary, Accent accent, TextShade textShade)这个构造函数接受 Primary 和 Accent 枚举类型作为参数，用于指定主颜色和强调色。Primary 枚举包含一系列预定义的主颜色，而 Accent 枚举包含一系列预定义的强调色。此构造函数还接受 TextShade 枚举类型的参数，用于指定文本的明暗色调。通过使用这个构造函数，你可以轻松地选择 颜色方案的不同变体。[例程中使用的就是这个重载]
[*]public ColorScheme(Color primary, Color darkPrimary, Color lightPrimary, Color accent, TextShade textShade)这个构造函数接受 Color 类型的参数，用于直接指定自定义的颜色。你可以传入具体的颜色对象作为参数，以定义主颜色、深色主颜色、浅色主颜色、强调色以及文本明暗色调。
先看主题，创建一个改变主题的MaterialButton实现深色和浅色主题的切换了:
private void btn_ChangeTheme_Click(object sender, EventArgs e)
{
materialSkinManager.Theme = materialSkinManager.Theme == MaterialSkinManager.Themes.DARK ? MaterialSkinManager.Themes.LIGHT : MaterialSkinManager.Themes.DARK;
}再看配色方案，在此之前我们先在页面上随便加一些控件便于显示配色效果：
https://img2023.cnblogs.com/blog/2913706/202306/2913706-20230628193308455-339073151.png
更改配色方案：
private int colorSchemeIndex; // 通过更换次数，方便循环更换颜色
private void btn_SwitchColor_Click(object sender, EventArgs e)
{
colorSchemeIndex++;
if (colorSchemeIndex == 6)
{
colorSchemeIndex = 0;
}
SwitchColor(colorSchemeIndex);
}
private void SwitchColor(int colorSchemeIndex)
{
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;
case 3:
materialSkinManager.ColorScheme = new ColorScheme(
Primary.Red800,
Primary.Red900,
Primary.Red500,
Accent.Green200,
TextShade.WHITE);
break;
case 4:
materialSkinManager.ColorScheme = new ColorScheme(
Primary.Yellow800,
Primary.Yellow900,
Primary.Yellow500,
Accent.DeepOrange200,
TextShade.WHITE);
break;
case 5:
materialSkinManager.ColorScheme = new ColorScheme(
Primary.DeepOrange800,
Primary.DeepOrange900,
Primary.DeepOrange500,
Accent.Yellow200,
TextShade.WHITE);
break;
case 6:
materialSkinManager.ColorScheme = new ColorScheme(
Primary.Lime800,
Primary.Lime900,
Primary.Lime500,
Accent.Green200,
TextShade.WHITE);
break;
}
Invalidate(); // 重绘控件
}配色是Github上Example以及用户issue里的配色方案，大家如果要用的话，可以参考：Material Skin 指南 中文翻译文档
看看效果：
https://img2023.cnblogs.com/blog/2913706/202306/2913706-20230628200829827-1315562056.gif
MaterialSkin实现了很丰富的动画效果，But...
默认的蓝粉配色就已经很好看了，大家如果有什么酷炫帅气的配色方案，欢迎在评论区留言交流！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]