C# WPF Tutorial – Datagrid

WPF Datagrid provides you with the ability to populate data in customizable table form. In previous tutorials, we discuss only the way to input in WPF Application, but this tutorial specifically shows the output in your app.

Such as you have data with a variety of data types, such as checkboxes, dropdowns and fields then you can use WPF Datagrid to make your own row with different types of data fields.

When you set the ItemsSource property, the DataGrid control automatically creates columns by default. The kind of data in the column determines the kind of column that is generated. For More.

We are going to create an example having the following data with their types:

• User Name as a string
• User Gender as a string
• User Disability as bool which visual as a WPF checkbox
• User Education as enum which visual as a WPF combobox

XAML Code:

<DataGrid Name = "WPFDataGrid" AutoGenerateColumns = "False">
<DataGrid.Columns>
<DataGridTextColumn Header = "Name" Binding = "{Binding Name}" />
<DataGridTextColumn Header = "Gender" Binding = "{Binding Gender}" />
<DataGridCheckBoxColumn Header = "Disability?" Binding = "{Binding Disability}"/>
<DataGridComboBoxColumn Header = "Education" SelectedItemBinding = "{Binding Education}" 
ItemsSource = "{Binding Source = {StaticResource myEnum}}" />
</DataGrid.Columns>
</DataGrid>

In this xaml code, we will define type manually, in case you want to do that make AutoGenerateColumns false. If you will make this property true, it will auto decide what to show on UI based on the data you put in C# objects.

In case you to generate columns auto based on data push to Datagrid, you can use the following code.

<DataGrid Name = "WPFDataGrid" AutoGenerateColumns = "True">
</DataGrid>

Let’s populate the Datagrid from C# by creating objects and pushing them. First, we create a C# class, in which we declare some properties.

public enum Edu
   {
       HighSchool,
       Collage,
       UniversityGraduate,
   }
   internal class UserData
   {
       public string Name { get; set; }
       public string Gender { get; set; }
       public bool Disability { get; set; }
       public Edu Education { get; set; }

       
       public static ObservableCollection<UserData> GetUsers()
       {
           var Users = new ObservableCollection<UserData>();

           Users.Add(new UserData()
           {
               Name = "Junaid Shahid",
               Gender = "Male",
               Disability = false,
               Education = Edu.HighSchool
           });

           Users.Add(new UserData()
           {
               Name = "Alex Gray",
               Gender = "Male",
               Disability = true,
               Education = Edu.UniversityGraduate
           });

           Users.Add(new UserData()
           {
               Name = "Aliza Jimmy",
               Gender = "Female",
               Disability = false,
               Education = Edu.Collage
           });
           return Users;
       }
   }

In the above code, you can see, we are creating observer collection and filling data into it, whenever someone called this method, data will auto-populate.

After this, we will call DataGrid by name in the main method as follows.

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            WPFDataGrid.ItemsSource = UserData.GetUsers();
        }

    }

Output:

In this image, you can clearly observe Disability which is bool becomes a checkbox & Education which is enum becomes Combobox.

What is ObservableCollection?

A dynamic collection of items of a specific kind is referred to as an ObservableCollection. The addition, removal, or updating of objects is possible with automatic action notification. The UI is automatically updated whenever an object is added to or withdrawn from an observable collection.

If you need any help regarding WPF Application you can contact me.