Windows Forms: Modern UI Metro Framework Windows 8 UI in C#

By FoxLearn 7/15/2017 8:01:57 PM   7.9K
Design Flat Login Modern UI Metro Framework Windows 8 UI using Metro Framework, Metro theme, Metro style in C#

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

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

install metro framework

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

metro ui c#

Create metro user control

ucLogin

metro ui login

ucDashboard

metro dashboard

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 MetroUILogin
{
    public partial class frmMain : MetroFramework.Forms.MetroForm
    {
        private static frmMain _instance;

        public static frmMain Instance
        {
            get
            {
                if (_instance == null)
                    _instance = new frmMain();
                return _instance;
            }
        }

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

        public frmMain()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //Load login form
            ucLogin uc = new ucLogin();
            uc.Dock = DockStyle.Fill;
            mPanel.Controls.Add(uc);
            _instance = this;
        }
    }
}

ucLogin

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;
using MetroFramework.Controls;

namespace MetroUILogin
{
    public partial class ucLogin : MetroUserControl
    {
        public ucLogin()
        {
            InitializeComponent();
        }

        private void btnLogin_Click(object sender, EventArgs e)
        {
            //Check login
            if (txtUsername.Text == "admin" && txtPassword.Text == "admin")
            {
                ucDashboard uc = new ucDashboard();
                uc.Dock = DockStyle.Fill;
                frmMain.Instance.MetroContainer.Controls.Add(uc);
                frmMain.Instance.MetroContainer.Controls["ucDashboard"].BringToFront();
            }
        }
    }
}

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 MetroUILogin
{
    public partial class ucDashboard : MetroFramework.Controls.MetroUserControl
    {
        public ucDashboard()
        {
            InitializeComponent();
        }
    }
}

VIDEO TUTORIALS