Material Design Login Form

This post will show you how to use MaterialSkin to design a material login form. Material Design is a library for .Net to make your UI look better instead of using the default Windows Forms. To practice, you can download it directly from https://github.com/Viki4Tech/MaterialDesign

As you can see, the Material Design library supports multiple control such as TextBox, RadioButton, Label, ProcessBar, Button, CheckBox, FileInput, Button, FlatButton, FolderInPut, SmartCard, Card, Toggle.

Unzip the downloaded zip file, then copy Controls, Resources, UIManagers directories to your project. You can also rebuild the Material Design project to a dll file, then add a reference to the dll file.

From the Nuget Package Manager search for MaterialSkin.Updated, then install it. If you are using an older version of Visual Studio without Nuget, you can download it directly from https://github.com/IgnaceMaes/MaterialSkin

then add a reference to MaterialSkin.dll. As you can see, Material Skin also supports many controls, such as Checkbox, Divider, Flat Button, Label, Radio Button, Raised Button, Single-line text field, TabControl, ContextMenuStrip, ListView, ProgressBar, FloatingActionButton, Dialogs, Switch, More...

Now we will design an awesome UI login as shown below.

Open your login form, then modify your code to initialize the material skin as the following.

using MaterialSkin;
using MaterialSkin.Controls;

namespace MaterialUI
{
    public partial class frmLogin : MaterialForm
    {
        public frmLogin()
        {
            InitializeComponent();

            MaterialSkinManager materialSkinManager = MaterialSkinManager.Instance;
            materialSkinManager.AddFormToManage(this);
            materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;

            // Configure color schema
            materialSkinManager.ColorScheme = new ColorScheme(
                Primary.Blue300, Primary.Blue500,
                Primary.Blue500, Accent.LightBlue400,
                TextShade.WHITE
            );
        }
    }
}