Windows Forms: Metro ListView in C#

This tutorial show you how to Create a Metro ListView using Metro Framework, then use Entity Framework to retrieve data from SQL Database in C#

As you know, 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.

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

metro listview

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: From your visual toolbox drag a metro listview, button to your windows forms, then design your metro form as shown below

To initialize your metro form, you need to change inheritace from Form to MetroForm

public partial class Form1 : Forms

to

public partial class Form1 : MetroFramework.Forms.MetroForm

metro form

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

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 button click event as the following

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);
        }
    }
}

First, 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 a customer object to your metro listview as shown above.

VIDEO TUTORIALS