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