How To Use ModernUI Framework In Windows Forms

Hope this article helps many of the beginners who are trying to change the look and feel of the traditional Windows Forms. Since school, we have been using the Microsoft Visual Studio. We have grown up with the same usual look , quite bored huh !! , But, things changed when Microsoft introduced mobile apps and Windows 8 which made a drastic change in the UI, cool looking tile based UI with the Slim Font.

 

This article explains how to create such UI and add a rich look to your app. I have used the following environment to experiment with it.

 

Solution Environment  : Visual Studio 2010

Frameworks used        : Modern MetroFramework UI (Version 4)

Language                     : Visual C#

Operating Systems      : Windows 7

 

Step 1 - Adding the MetroFramework UI to your VS.

 

Option 1: Can get from NuGet Package Manager ( NuGet Extension should be installed to do this).

 

Option2: Download the archive from  https://github.com/peters/winforms-modernui and place in your local drive. Then, reference these three libraries. Please note the MetroFramework UI is open source. 

MetroFramework.Design.dll
MetroFramework.dll
MetroFramework.Fonts.dll

After referencing the libraries, the next step is to add the controls in the toolbox. This is essential because henceforth only these controls shall be used in the forms.

 

 

 

 

 

 

Step 2 - Adding the UI Controls to Toolbox.

 

To do this, just right click on the toolbox and choose the option Add Tab. 

 

Type the name of your choice. In my case, I have kept it as MetroFramework.

 

Again, right click on the newly created tab and select the option Choose Items. 

 

From the dialog, click on .NET Framework Components. Now, click on the browse button to select the framework.

 

Locate the path where the libraries are stored.

 

Select only MetroFramework.dll as the component.

 

That's it. You can now see the ModernUI controls in the toolbox.

 

Step 3 - Create your first ModernUI form

 

To create the form, right click on the Project in the Solution Explorer and select Add --> Windows Forms.

 

The normal Windows Form appears on the screen. Double click on it to go to the code part. You will see the following code there.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace ConnectScale
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

Now, all we need to do is just a simple task. That is to change the form declaration on top to the MetroForm from Form, as shown below, 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using MetroFramework.Forms;

namespace ConnectScale
{
    public partial class Form1 : MetroForm
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

Now, the total look and feel of the form transfigures from the traditional look to a very new exciting one. 

 

 

Image 1: The old Form

 

 
Image 2: A MetroForm with ModernUI

 

The form colors can be changed according to your wish, for demo purposes i have kept it blue in color.

 

 A sample Login form with ModernUI looks like the below.