If you have not read the previous tutorials, please read and operate them in order first!
Portal: C# Winform control package MaterialSkin usage tutorial is free and open source, supports Chinese!
This issue may be a bit verbose, in case there are some newbies who don’t know how to use the TabControl control, and the length will be quite long. I hope everyone can calm down, learn these, and then make a template, which can be used every time in the future. Copy the template, it’s hard work once, and you will be very comfortable in the future! Let’s take a look at the final result picture first:
If you know something about TabControl, you can directly download the source code to learn:
If you want to realize a beautiful sidebar, you need to prepare a MaterialTabControl first, and then add the desired columns in the form of TabControl.
We first prepare an empty form of Material (please read the previous tutorial if you don’t know how) , then drag in the MaterialTabControl control and select it. A small triangle will appear on the right side. Click on the small triangle, click Add tab, and add the option Add cards to the desired number.
It should be noted that if you want to select the MaterialTabControl, you need to click on the light gray part above the control . The white part below is the content area, which is of tabPage type. You cannot get out of this small triangle by clicking.
I chose to add 6 tabs and change the text content for each tab one by one.
Changing the text content is also very simple. First click on the label above to enter the corresponding TabPage, then click on the white area and change the Text property in the properties panel.
Repeat the operation to change all the tabs. After modification, the tabs will be named with the desired sidebar column names like mine.
So how to connect this TabControl with the sidebar? This requires using the properties of our form.
Click on the form, enter the properties panel, and set the DrawerTabControl to the TabControl we just set.
Drawer here refers to the sidebar.
Then set these three properties to True
Click Run and you will get the following effect.
Move the mouse up and the sidebar expands. You can see that the content we set in the TabControl has been automatically generated as the sidebar.
However, the current sidebar does not have icons. Let’s introduce how to add icons to each column.
First download the image of the icon, iconfont-Alibaba Vector Icon Library
Here we need to use a control that comes with Windows. Search for Image in the toolbox and an ImageList will appear.
Drag this ImageList control onto the form, and you can see an ImageList component appearing below the design area.
Click the small triangle on the upper right, modify the parameters first, set the size to 24, and the depth to 32Bit , then select the image and add the image
Add the downloaded icon to it
、
Next is to bind the List to each option.
Select the TabControl of the interface ( remind again, click on the upper light gray area to select the TabControl ), then find the ImageList property in the properties panel and set it to the ImageList just now.
Then select TabPage in turn and set the ImageKey property to the desired icon. This must be set for each TabPage .
3. Set the corresponding icon.
Repeat the above three steps to set up all the tabs. At this time, all the icons on the main interface are displayed. I used some white icons. During normal use, the icon colors will be redrawn, so just choose the ones with clear outlines. That's it, the color doesn't matter.
Click Run and you can see that the icons have been displayed (I think some icons don’t match here, so I changed them)
Click the menu button on the left or move the mouse to the sidebar to display a detailed description
The settings for the sidebar are basically in the properties of the form . The sidebar is a bit wide now. Let’s change the width.
Change the width to 150 and our sidebar is complete!
Add content to each content page of the TabControl, and the sidebar can automatically switch.
Return to the design interface, select the system homepage tab, and then edit the content you want to implement in the blank area of the TabPage.
The default background color of TabPage is transparent. If you put a control with a transparent background (such as Label) on it, it will become pure black. There are two solutions.
1. To change the TabPage background color, first click on the blank area and change the Background property to white or other opaque colors.
2. Use Card or other containers to place transparent controls in the container
If you don't use those transparent controls, you don't need to change it.
In addition , some space needs to be reserved on the left side for the sidebar .
The editing interface is as shown below:
After running it will look like this:
After editing the content of the system homepage, click on other tabs to set the content of other tabs, and finally run it. Click the icon on the left to switch to other content pages.
System homepage: (as shown above)
File management:
Now our sidebar is set up!
Change the color scheme to your favorite, perfect!
Warm reminder, you can make a template and save it to a folder. You can copy this template project every time you use it in the future. It is very convenient! It’s a once and for all approach!
Coding is not easy, I hope everyone will like and support me!
Next:
Review of past issues:
C# Winform control package MaterialSkin usage tutorial is free and open source, supports Chinese! 
https://blog.csdn.net/XX_YZDY/article/details/126259798 C# Winform control package MaterialSkin usage tutorial--Button button https://blog.csdn.net/XX_YZDY/article/details/126278844 C# Winform control package MaterialSkin usage tutorial--some color schemes https://blog.csdn.net/XX_YZDY/article/details/126286341