
WPF Datagrid didn’t seem to be that handy or easy to use to me like win-form data-grid. However, that doesn’t mean it’s a lot hard to implement it. Though I wasn’t able to dig much into this, I would like to share my gathered knowledge while basic practicing that should help you implement a simple WPF and c# #-based data-grid application easily. I will also show how to add custom button controls inside the data grid and associate them with even handlers properly. I am using Visual Studio 2010 and the WPF toolkit project for this tutorial.
I am assuming you do have basic wpf application development knowledge . I will also use LinQ and DBML based database schema. So, you if you don’t have knowledge in that area, you also might want to read basic linq to sql tutorial first as well.
Let’s use the following test DBML schema that we will be referring to in the rest of the tutorial:
XAML Implementation:
Whatever type of page you are adding the data grid to (either a window or a user control), you should first mention the WPF toolkit namespace in the header part of the .xaml file.
xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit"
Code language: JavaScript (javascript)
Now, let us create the XAML-based data-grid layout. Besides the basic design layout of the columns, we will also have to define the ‘Binding’ property and indicate the exact property name of the class, which instances will be bound here. We will use a few from our above ‘Configuration’ class in the DBML/database table. In addition to showing a few columns, there will be one button control as well to delete an instance/database table row right from the WPF data-grid view. So, here is the XAML code:
<my:DataGrid x:Name="ConfigGrid" AutoGenerateColumns="False">
<my:DataGrid.Columns>
<my:DataGridTextColumn Binding="{Binding Path=Entry_Number}" Header="Id" Visibility="Hidden" />
<my:DataGridTextColumn Binding="{Binding Path=Part_CatalogNumber}" Header="Part Number" />
<my:DataGridTextColumn Binding="{Binding Path=Sensor_Type}" Header="Sensor Type Id" />
<my:DataGridTextColumn Binding="{Binding Path=Date_Entered}" Header="Date Created" />
<my:DataGridTextColumn Binding="{Binding Path=User_Comments}" Header="User Comments" Width="250" />
<my:DataGridTemplateColumn>
<my:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Name="btnOldDelete" Click="btnOldDelete_Click">Delete</Button>
</DataTemplate>
</my:DataGridTemplateColumn.CellTemplate>
</my:DataGridTemplateColumn>
</my:DataGrid.Columns>
</my:DataGrid>
Code language: HTML, XML (xml)
Notice the ‘my’ tag, which is a user from the imported WPFToolkit library. If you want, you can modify it in the header and thus use a more meaningful tag in template coding. Also, adding additional custom controls is very simple. Just the controls need to be added inside the “DataGridTemplateColumn.CellTemplate” -> DataTemplate tag.
Load Data To WPF DataGrid:
Loading data to the data grid is very easy and efficient :). We must assign a list of objects to the ‘ItemSource’ property of the data-grid instance. Let’s check into the code snippet:
List<Configuration> configs = ConfigurationManager.Instance.SearchConfiguration(partNumber);
if (configs == null || configs.Count <= 0)
{
throw new Exception();
}
OldConfigGrid.ItemsSource = configs;
Code language: PHP (php)
Whoaah! It is very simple. Note that it is very possible to assign a list of objects of any type of class, not only database ones, so if you load data from API, XML, etc., they will also fit in here without any problem.
Delete A Configuration:
Now, let’s examine how to delete a row from the database using the action taken from the data grid’s custom button.
private void btnDelete_Click(object sender, RoutedEventArgs e)
{
try
{
TVConfiguration config = (TVConfiguration)ConfigurationGrid.CurrentItem;
if (ConfigurationManager.Instance.DeleteNewConfiguration(config.Id))
{
MessageBox.Show("Configuration Deleted Successfully");
UserControl_Loaded(sender, e);
}
else
{
MessageBox.Show("Configuration Couldn’t be deleted");
}
}
catch (Exception err)
{
logger.Error(err.Message, err);
MessageBox.Show("This row doesn't contain any data");
}
}
Code language: PHP (php)
As we see above, we can easily use the ‘ConfigurationGrid.CurrentItem’ property to get the current instance. As soon as we get the instance, we can perform the necessary operation on that object just like any other place.
Just like this delete button, we can implement update functionality in the same way.
References:
You can join the WPF Community for your query about details. You can ask your question here as well. I will try to answer as much as possible. I hope this simple illustration will help you understand the basics of using a WPF data grid in a C#.NET application. Happy coding 🙂
Discover more from CODESAMPLEZ.COM
Subscribe to get the latest posts sent to your email.
Excellent tutorial, for Data grid binding, I was looking for this kind of simple one, no where else it available. you made my job easy. Thanks allot. Keep it up.
Hello
There is problem with datagrid which is i am getting that this datagrid is not persistant. I add checkbox column to datagrid when i am selecting some checkboxes and scrolling down the datagrid some checks
automatically get removed and some get added. What is the solution for that? Please provide me solution for that.