.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Gridview Control in WPF Tutorial

Posted By:Karthikeyan Anbarasan       Posted Date: May 15, 2013    Points: 200    Category: WPF    URL: http://www.dotnetspark.com  

In this tutorial we are going to see how to use Grid View Control in a Windows Presentation Foundation ( WPF ) application development. Since we know Windows Presentation Foundation is a XAML based programming it applies to the standalone and as well browser based application


In this tutorial we are going to see how to use Grid View Control in a Windows Presentation Foundation application development. Since we know Windows Presentation Foundation is a XAML based programming it applies to the standalone and as well browser based application. In Windows Presentation Foundation we don't have an option to use Gridview directly, but if we are looking for a grid view control then we have an alternate option to use Listview designed as a Gridview control. In Listview we have a property called View which is used to provide a GridView Layout to the Listview Control. The view property of the Listview control has two types that can be used across as a Gridview and other is a custom view as per the requirement. Let us see the steps on how to use this control to design a good Gridview type of the control with the available data.


Open Visual Studio 2012 IDE in administrator mode and select File à New project and select a Windows Presentation Foundation template with a valid project name as shown in the screen below.


Click on ok will create the project and the solution with the default files and folders as shown in the screen below. The files include a base default xaml file called MainPage.Xaml and other file which is App.xaml. We need to use MainPage.xaml as this is the default page that triggers on the application load.

We can see Gridview property that is available, but it's like Gridview is used as a supplement control to a Listview which provides the styles and layout for the final view. The Gridview does not have its own control property such as backgrounds, foregrounds, fonts, sizes etc. but we can use a Listview container to provide all control related properties. So we need to have a Listview container in place before we write our Gridview control as shown in the screen below.

XAML Code:

<Window x:Class="GridviewSample.MainWindow"
   Title="MainWindow" Height="350" Width="525">
  <ListView x:Name="LsView">
   <GridView AllowsColumnReorder="true" ColumnHeaderToolTip="Details of Attendees">
  <GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Path=Name}" />
  <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Path=Age}" />
  <GridViewColumn Header="Gender" Width="100" DisplayMemberBinding="{Binding Path=Gender}" />

Now write the code behind to bind the data to the Gridview control inside the Listview control as shown in the screen below. Here we have created an Arraylist with the default data to have it as a sample.

C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections;

namespace GridviewSample
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
        public MainWindow()
            LsView.ItemsSource = AttendeeList();

        private ArrayList AttendeeList()
            ArrayList list = new ArrayList();
            list.Add(new Attendees("Karthikeyan", 25, "Male"));
            list.Add(new Attendees("Ramkumar", 28, "Male"));
            list.Add(new Attendees("Rahman", 25, "Male"));
            list.Add(new Attendees("Neha", 22, "Female"));
            list.Add(new Attendees("Varun", 25, "Male"));
            return list;

    public class Attendees
        public Attendees(string attendeeName, Int16 attendeeAge, string attendeeGender)
            this.Name = attendeeName;
            this.Age = attendeeAge;
            this.Gender = attendeeGender;

        private string name;

        public string Name
            get { return name; }
            set { name = value; }
        private Int16 age;

        public Int16 Age
            get { return age; }
            set { age = value; }
        private string gender;

        public string Gender
            get { return gender; }
            set { gender = value; }

Now run the application by simply pressing F5 directly from the keyboard and we can see the application is executed and loaded as a WPF standalone application as shown in the screen below.


So in this article we have seen how to use a Gridview control with the Listview container to customize the view accordingly. We have many things to be addressed with this Gridview control which we will see in our upcoming articles.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend