C# Winform控件包 MaterialSkin使用教程 -- 侧边栏篇

如果没有看过以前几篇教程的，请先按照顺序阅读并操作一下！

传送门：C# Winform控件包 MaterialSkin使用教程 免费开源，支持中文！

这期说的可能比较啰嗦，因为防止有一些萌新不会用 TabControl 控件，篇幅会比较长，希望大家可以静下心来，将这些学会，就可以做出一个模板出来， 以后每次使用可以去复制模板，一次辛苦，以后都会很舒服！先放一下最终成果图：

对TabControl有所了解的可以直接下载源码进行学习：

C# Winform 侧边栏 左侧导航 菜单栏 自动隐藏和显示，支持图标，可更换主题颜色

想要实现优美的侧边栏需要先准备一个MaterialTabControl，然后将想要的栏目以TabControl的形式添加上去。

我们先准备一个Material的空窗体（如果不会请看之前的教程），然后拖入MaterialTabControl控件，并选中，在右侧会出现一个小三角形，点击这个小三角，点击添加选项卡，将选项卡添加到想要的个数。

需要注意的是，想要选中MaterialTabControl，需要点击控件上方浅灰色的部分，下方白色的部分是内容区，是tabPage类型，点击是出不来这个小三角的。

我选择添加6个选项卡，并逐一给选项卡更改文本内容。

更改文本内容也很简单，先点击上面的标签，进入对应的TabPage中，然后点击白色区域，在属性面板中更改Text属性即可。

 

重复操作，将所有的选项卡更改完成，修改好后会像我一样，标签以想要的侧边栏栏目名命名。

那么怎么将这个TabControl与侧边栏联系起来呢？ 这就要使用我们窗体的属性了。

点击窗体，进入属性面板，设置DrawerTabControl为刚才我们设置好的那个TabControl。

这里的Drawer就是指的侧边栏的意思。

 再将这三个属性设置为True

 点击运行，你会得到如下的效果。

鼠标移动上去，侧边栏展开，可以看到我们在TabControl中设置的内容已经自动生成为侧边栏了。

 不过现在的侧边栏还没有图标，下面来介绍如何为各个栏目添加图标。

首先先下载图标的图片，iconfont-阿里巴巴矢量图标库

 这里要用到Windows自带的一个控件，在工具箱中搜索Image，会出来一个ImageList

将这个 ImageList 控件拖到窗体上，可以看到在设计区下方出现一个 ImageList 组件。

 点击右上的小三角，先修改一下参数，大小设置为24，深度32Bit，然后选择图像、添加图像

 将下载好的图标添加进去

、

接下来是将List绑定到每个选项。

选中界面的TabControl（再次提醒，点击上部浅灰色区域才是选中TabControl），然后在属性面板中找到 ImageList 属性，设置为刚刚的 ImageList。

 然后再依次选中TabPage，设置ImageKey属性为想要的图标，每一个TabPage都要设置。

3.设置对应的图标。

 重复上面三步，将所有的选项卡都设置完毕，这时主界面所有图标都显示出来了，我用了一些白色的图标，正常使用时，图标颜色都会被重新绘制，所以只要选择轮廓清晰的即可，颜色并不重要。

 点击运行，可以看到图标已经显示出来了（这里我觉得一些图标不搭，换了一下）

 点击左边的菜单按钮或将鼠标移动到侧边栏上，可以显示出详细描述

 对侧边栏的设置基本上都在窗体（Form）的属性里，现在的侧边栏有些宽了，我们改一下宽度

 将宽度改为150，我们的侧边栏就完成啦！

 向TabControl的每个内容页添加内容，侧边栏就可以自动切换了。

回到设计界面，选择系统主页选项卡，然后在TabPage空白区域编辑你想实现的内容。

TabPage默认背景颜色是透明色，如果再在上面放透明背景的控件（如Label)，会变成纯黑，解决办法有两个

1.将TabPage背景色改掉，先点击空白区域，将Background属性改为白色或者其他不透明颜色

2.使用Card或其他容器，将透明控件放在容器里

如果没使用那些透明的控件，也可以不改。

另外还需要在左侧预留出一些位置给侧边栏，

编辑界面如下图：

运行之后会是这样：

将系统主页的内容编辑好之后，再点击其他选项卡，设置其他选项卡的内容，最后运行，点击左侧的图标，可以切换到其他内容页。

系统主页：（如上图）

文件管理：

至此我们的侧边栏就设置好了！

再换个喜欢的配色方案，完美！

温馨提示，可以做出一个模板出来，另存到一个文件夹， 以后每次使用可以去把这个模板项目复制一下，非常方便！属于一劳永逸的做法！

码字不易，希望大家多多点赞支持！

下一篇：

C# Winform控件包 MaterialSkin使用教程 -- 横向导航栏_XX_YYDS的博客-CSDN博客本期教大家如何给Winform程序设置一个水平导航栏，使用MaterialSkin开源控件包进行美化，与侧边栏十分相似，却又有些许不同，总的来说是十分美观的，抓紧学习，大家一起卷起来！https://blog.csdn.net/XX_YZDY/article/details/126536474

往期回顾：

C# Winform控件包 MaterialSkin使用教程 免费开源，支持中文！https://blog.csdn.net/XX_YZDY/article/details/126259798C# Winform控件包 MaterialSkin使用教程 -- Button 按钮篇https://blog.csdn.net/XX_YZDY/article/details/126278844C# Winform控件包 MaterialSkin使用教程 -- 一些配色方案https://blog.csdn.net/XX_YZDY/article/details/126286341