Windows Forms: Metro ListView in C#

This article shows you how to create a Metro ListView with Metro Framework using Entity Framework to retrieve data from sql database in C# Windows Forms Application.

The Metro Framework is a library support multiple controls that allows you to design an awesome ui windows form application and Entity Framework is an ORM that allows you to access your database, you can use the Entity Framework to Insert, Update, Delete data from your database or call stored procedures, select views, tables that you want process.

To play the demo you should create a new windows forms project, then right click on your project and 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

Drag the MetroListView and MetroButton controls to your winform, then design a simple metro form as shown below.

To initialize your metro form, you need to change inheritace from the Form to MetroForm as the following c# code.

public partial class Form1 : Forms

to

public partial class Form1 : MetroFramework.Forms.MetroForm

metro form

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

We will use Entity Framework Database First to fetch data from your customer table in the Northwind database.

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

Finally, Add the click event to the Load button allows you to retrieve data from the sql database, then add data to the MetroListView control as the following c# code.

private void btnLoad_Click(object sender, EventArgs e)
{
    mListView.Items.Clear();
    using (NorthwindEntities db = new NorthwindEntities())//Create an instance dbcontext
    {
        var list = db.Customers.ToList();//Retrieve data
        foreach (Customer c in list)
        {
            ListViewItem item = new ListViewItem(c.CustomerID);//Add data to MetroListView
            item.SubItems.Add(c.ContactName);
            item.SubItems.Add(c.ContactTitle);
            item.SubItems.Add(c.Address);
            item.SubItems.Add(c.City);
            mListView.Items.Add(item);
        }
    }
}

To load data to the ListView control, you need to retrieve all the data from the customer table, then convert it to the list object. You can use the foreach loop to add the Customer object to your Metro ListView as shown above.

VIDEO TUTORIAL