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

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

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.

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.

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

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.

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.

Drag and drop Material Label and change the text to "Lost your Password?" and "Reset Password".

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
    );
}

Step 7. Output

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

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.

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!