Windows Forms: How to use Winforms Modern UI Metro Framework in C#

Step 1: Click New Project, then select Visual C# on the left, then Windows and then select Windows Forms Application. Name your project "MetroUIDemo" and then click OK

Step 2: Right click on your project select Manage NuGet Packages -> Search metro framework -> Install

If you don't see the metro framework in your toolbox, you can view How to download and install metro framework

Step 3: Design your form as below

Create metro user control

ucCategory

ucProduct

ucDashboard

Right click on your project select Add -> New Item -> ADO.NET Entity Data Model -> Select Northwind database -> Category, Product table

If you haven't got Northwind database, you can view How to download and restore Northwind database in SQL Server

Step 4: Add code to handle your winform as below

frmMain

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

namespace MetroUIDemo
{
    public partial class frmMain : MetroFramework.Forms.MetroForm
    {
        static frmMain _instance;
        public static frmMain Instance
        {
            get
            {
                if (_instance == null)
                    _instance = new frmMain();
                return _instance;
            }
        }

        public MetroFramework.Controls.MetroPanel MetroContainer
        {
            get { return mPanel; }
            set { mPanel = value; }
        }

        public MetroFramework.Controls.MetroLink MetroBack
        {
            get { return mlBack; }
            set { mlBack = value; }
        }

        public frmMain()
        {
            InitializeComponent();
        }

        private void frmMain_Load(object sender, EventArgs e)
        {
            //Load dashboard to metro panel
            mlBack.Visible = false;
            _instance = this;
            ucDashboard uc = new ucDashboard();
            uc.Dock = DockStyle.Fill;
            mPanel.Controls.Add(uc);
        }

        private void mlBack_Click(object sender, EventArgs e)
        {
            mPanel.Controls["ucDashboard"].BringToFront();
            mlBack.Visible = false;
        }
    }
}

ucCategory

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

namespace MetroUIDemo
{
    public partial class ucCategory : MetroFramework.Controls.MetroUserControl
    {
        public ucCategory()
        {
            InitializeComponent();
        }

        private void ucCategory_Load(object sender, EventArgs e)
        {
            //Bind data to metro gridview
            using (NorthwindEntities db = new NorthwindEntities())
            {
                categoryBindingSource.DataSource = db.Categories.ToList();
            }
        }
    }
}

ucProduct

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

namespace MetroUIDemo
{
    public partial class ucProduct : MetroFramework.Controls.MetroUserControl
    {
        public ucProduct()
        {
            InitializeComponent();
        }

        private void ucProduct_Load(object sender, EventArgs e)
        {
            //Bind data to metrocombobox, metrogrid
            using(NorthwindEntities db = new NorthwindEntities())
            {
                categoryBindingSource.DataSource = db.Categories.ToList();
                Category obj = categoryBindingSource.Current as Category;
                if (obj != null)
                    productBindingSource.DataSource = db.Products.Where(p => p.CategoryID == obj.CategoryID).ToList();
            }
        }

        private void mcboCategory_SelectionChangeCommitted(object sender, EventArgs e)
        {
            //Using lamda to query data
            Category obj = mcboCategory.SelectedItem as Category;
            if (obj != null) {
                using (NorthwindEntities db = new NorthwindEntities())
                {
                    productBindingSource.DataSource = db.Products.Where(p => p.CategoryID == obj.CategoryID).ToList();
                }
            }
        }
    }
}

ucDashboard

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

namespace MetroUIDemo
{
    public partial class ucDashboard : MetroFramework.Controls.MetroUserControl
    {
        public ucDashboard()
        {
            InitializeComponent();
        }

        private void mtCategory_Click(object sender, EventArgs e)
        {
            //Check metro usercontrol
            if (!frmMain.Instance.MetroContainer.Controls.ContainsKey("ucCategory"))
            {
                ucCategory uc = new ucCategory();
                uc.Dock = DockStyle.Fill;
                //Add usercontrol to metro panel
                frmMain.Instance.MetroContainer.Controls.Add(uc);
            }
            frmMain.Instance.MetroContainer.Controls["ucCategory"].BringToFront();
            frmMain.Instance.MetroBack.Visible = true;
        }

        private void mtProduct_Click(object sender, EventArgs e)
        {
            //Open metro user control
            if (!frmMain.Instance.MetroContainer.Controls.ContainsKey("ucProduct"))
            {
                ucProduct uc = new ucProduct();
                uc.Dock = DockStyle.Fill;
                frmMain.Instance.MetroContainer.Controls.Add(uc);
            }
            frmMain.Instance.MetroContainer.Controls["ucProduct"].BringToFront();
            frmMain.Instance.MetroBack.Visible = true;
        }
    }
}

VIDEO TUTORIALS