Building A Login Form Using Material Design Control In Visual Studio 2017


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 fille 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.

Visual Studio 
Visual Studio 
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.

Visual Studio 
Step 4 - Material Form

The following example shows how to create a Material styled log in 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.
  1. public partial class Form1 : MaterialSkin.Controls.MaterialForm  
Visual Studio 
Step 5 - Drag and Drop Controls

Now, drag and drop controls from the toolbox onto the form in Visual Studio 2017. For creating a log in form, drag and drop the Material SingleLine Text Field and change its text as username and password.

Visual Studio 

Drag and drop the Material raised button and Material checkbox, changing their texts as Login and Remember Me. Now, drag and drop a Material Divider onto the form.

Visual Studio 
Drag and drop Material Label and change the text as "Lost your Password?" and "Reset Password".

Visual Studio 

Visual Studio
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.
  1. public Form1()  
  2. {  
  3.     InitializeComponent();  
  5.     MaterialSkin.MaterialSkinManager skinManager = MaterialSkin.MaterialSkinManager.Instance;  
  6.     skinManager.AddFormToManage(this);  
  7.     skinManager.Theme = MaterialSkin.MaterialSkinManager.Themes.LIGHT;  
  8.     skinManager.ColorScheme = new MaterialSkin.ColorScheme(MaterialSkin.Primary.LightBlue400, MaterialSkin.Primary.BlueGrey900, MaterialSkin.Primary.Blue500, Accent.Orange700, MaterialSkin.TextShade.WHITE);  
  10. }  
 Visual Studio
Step 7 - Output

Compile and run the code. The following output will be achieved.

Visual Studio 

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.

Visual Studio 


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!