Home > DeveloperSection > Articles > DataGrid control in WPF

DataGrid control in WPF


WPF WPF 
Ratings:
1 Comment(s)
 5130  View(s)
Rate this:

DataGrid control in WPF

In this article I am going to explain you concept of DataGrid control in WPF. Whenever we are talking about to retrieve data from database or any collection then main problem that comes is to store data. We cannot store data smoothly in arrays or variables. To store data smoothly we need a special type of control that is known as DataGrid view control. In this demonstration I will show you how to use data grid control in WPF 4.0 and how to retrieve values from List collection.

Some Common properties related with DataGrid Control

Ø  Name—Name property is used to uniquely identify your datagrid view control.

Ø  HorizontalAlignment—HorizontalAlignment property is used to set horizontal alignment of your data control. Possible values are Left, Right, and Center etc.

Ø  Margin—Margin property is used to set margin of your data control.

Ø  Background—Background property is used to set background of your data grid control.

Ø  RowBackground—RowBackground property is used to set background of row of data grid control.

Ø  AlternatingRowBackground—AlternatingRowBackground property is used to add alternate background of row of data grid control.

Ø  Height—Height property is used to set height of the data grid control.

Ø  Width—Width property is used to set width of the data grid control.

Ø  RowHeight—RowHeight property is used to set height of row of data grid control.

Ø  ColumnWidth—ColumnWidth property is used to set width of column of data grid control.

Ø  AutoGenerateColumn—AutoGenerateColumn is a Boolean property which takes Boolean value that is either true or false. True Boolean value represents that column is automatically generated and false value represents you have to create column of data grid control manually. Default is true.

Ø  SelectionMode—a SelectionMode property represents selection of row of data grid control that is how many rows are selected at a time. It has two values one is Single means only one row at time is selected and another one is extended which means multiple row can be selected concurrently.

Ø  ItemsSource—ItemsSource property is used to bind any collection data to grid view control. By using this property you can bind data from datatable, dataset or any collection object which have IEnumerable interface.

Now I am going to show you how we can create a data grid control and use it and populate it on the click of button object.
For performing this task, drag a data grid control from toolbox of WPF control and drop it to Grid control. Then adjust the alignment of data grid control.

Then finally drag a button control to the surface of grid control and adjust its alignment. After performing these steps a bit of control will be written on xaml file which looks like follow.

Code:

<Grid>

<DataGrid Height="223" SelectionMode="Single" ColumnWidth="100" RowHeight="30" Background="LightGray" RowBackground="Coral" AlternatingRowBackground="Pink" HorizontalAlignment="Left" Margin="43,34,0,0" x:Name="dataGrid1" VerticalAlignment="Top" Width="418" >

           

        </DataGrid>

        <Button Content="Bind Employee Data" Height="23" HorizontalAlignment="Left" Margin="157,276,0,0" Name="button1" VerticalAlignment="Top" Width="215" Click="button1_Click" />

</Grid>

 

Output of the above code is as follows

DataGrid control in WPF

Binding Data to DataGrid control

Now after creating UI of demo the next step is used to binds data to data grid control. For performing these steps I create an Employee class which has 4 properties in which we store the value. I had created a method named LoadEmployeeData ( ) which store the information of employee in List collection. Then on click event of button control I lode data on Data Grid control by calling ItemsSource property.

  /// <summary>

        /// A method named LoadEmployeeData() which store details of

        /// 7 employee in List object and then return to their caller.

        /// </summary>

        /// <returns></returns>

 

        public List<Employee> LoadEmployeeData()

        {

            List<Employee> emp = new List<Employee>(); //Here we create a list object of Employee type

            emp.Add(new Employee()

            {

                empId = "E0001",

                empName = "Awadhendra",

                empAge = 21,

                empCity = "Allahabad"

            });

            emp.Add(new Employee() { empId = "E0002", empName = "Rahul", empAge = 25, empCity = "Allahabd" });

            emp.Add(new Employee() { empId = "E0003", empName = "Ashish", empAge = 21, empCity = "Allahabd" });

            emp.Add(new Employee() { empId = "E0004", empName = "Anup", empAge = 24, empCity = "Lucknow" });

            emp.Add(new Employee() { empId = "E0005", empName = "Radha", empAge = 22, empCity = "Lucknow" });

            emp.Add(new Employee() { empId = "E0006", empName = "Shanu", empAge = 23, empCity = "Lucknow" });

            emp.Add(new Employee() { empId = "E0007", empName = "Ajay", empAge = 22, empCity = "Allahabd" });

 

            return emp;

        }

 

        /// <summary>

        /// Loading data in a datagrid view control on click

        /// event of button object by calling ItemsSource property.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            dataGrid1.ItemsSource = LoadEmployeeData();

        }

    }

 

    /// <summary>

    /// Creating a employee class which have 4 public

    /// properties in which we store employee information.

    /// </summary>

    public class Employee

    {

        public string empId { get; set; }

        public string empName { get; set; }

        public int empAge { get; set; }

        public string empCity { get; set; }

        public bool empMaritualStatus { get; set; }

    }

 

Output of the above code snippet is as follows

DataGrid control in WPF

 


DataGrid control in WPF

By Memtech Lodhi on   5 years ago
Nice article.

Don't want to miss updates? Please click the below button!

Follow MindStick