Introduction
In this article, I am going to explain how to use Material Skin in Windows. Forms applications. Here, I have designed a login form using Material Skin in Visual Studio 2017.
Material Skin
Material Skin is an open-source library bringing material design to .NET Windows. Forms Applications.
Step 1. Start the Project
Open Visual Studio and start New Project---->Windows.Forms Application and name it as my application. The Form Designer page will be loaded by default. Now, right-click the project file and choose "Manage NuGet Packages".
![Visual Studio]()
Step 2. Download and Install Material skin.
From the NuGet Packages, browse Material Skin and download it. After downloading, install the Material Skin NuGet. Once the installation of the NuGet package is done, you can work with Material design in your project.
![Install Material]()
![NuGet]()
Step 3. Add Material control to the Controls Toolbox
After successful installation, you are able to drag and drop Controls into your form in the same way you did with the traditional method.
![Controls Toolbox]()
Step 4. Material Form
The following example shows how to create a Material-styled login form on your main form in a simple Windows. Forms project. Do follow this code and your output will appear as in the screenshot below.
public partial class Form1 : MaterialSkin.Controls.MaterialForm
![Material Form]()
Step 5. Drag and Drop Controls
Now, drag and drop controls from the toolbox onto the form in Visual Studio 2017. For creating a login form, drag and drop the Material SingleLine Text Field and change its text as username and password.
![Drop Controls]()
Drag and drop the Material raised button and Material checkbox, changing their texts to log in and Remember Me. Now, drag and drop a Material Divider onto the form.
![Material checkbox]()
Drag and drop Material Label and change the text to "Lost your Password?" and "Reset Password".
![Reset Password]()
![CPU]()
Step 6. Coding
Now, it's time to code. Follow the code given below which shows how to create a Material Styled Login Form on your main form.
public Form1()
{
InitializeComponent();
MaterialSkin.MaterialSkinManager skinManager = MaterialSkin.MaterialSkinManager.Instance;
skinManager.AddFormToManage(this);
skinManager.Theme = MaterialSkin.MaterialSkinManager.Themes.LIGHT;
skinManager.ColorScheme = new MaterialSkin.ColorScheme(
MaterialSkin.Primary.LightBlue400,
MaterialSkin.Primary.BlueGrey900,
MaterialSkin.Primary.Blue500,
Accent.Orange700,
MaterialSkin.TextShade.WHITE
);
}
![Coding]()
Step 7. Output
Compile and run the code. The following output will be achieved.
![Output]()
Step 8. Add Design
You can add an additional design to the Login Form by dragging and dropping some more controls from the Toolbox into the Form. The following output will be obtained.
![Add DesignÂ]()
Summary
Hope this article is interesting for you. In my next article, I will explain how to install NuGet Packages. For any problem or error in the code, please feel free to comment. Again, thanks for reading!