Skip to main content

C# WPF Tutorial - Using the WPF Toolkit DataGrid [Beginner]


WPF comes with a large number of built in controls, but from the beginning it has lacked something that many application developers find extremely important - a DataGrid. You can use the ListView to create something approximating a DataGrid (I've talked about it in a this tutorial), but it is a lot of work and not particularly straightforward. Thankfully, Microsoft realizes how important a full-featured DataGrid is - and how you probably don't want to wait for the next version of WPF to be able to use one. This is where the WPFToolkit comes in. The WPF Toolkit is "a collection of WPF features and components that are being made available outside of the normal .NET Framework ship cycle" which to me translates as "handy new controls I don't have to wait for".

The WPF Toolkit has a couple different controls, but the big one is the DataGrid - and that is what we will be exploring today. You can grab the toolkit from here. It is an MSI install package that will drop a couple DLLs off in a "WPF Toolkit" directory in your program files directory. Once you have that installed, the first thing you need to do to be able to use the toolkit is add it as a reference to your project:

Add Reference Dialog

Ok, now that we have the dll added as a reference, it is time to start actually using the DataGrid. The basics of using the DataGrid are incredibly easy - for example, take a look at the following XAML:
<Window x:Class="SOTC_DataGridExample.Window1" Name="This"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
    Title="DataGrid Example" Height="300" Width="300">
  <dg:DataGrid ItemsSource="{Binding ElementName=This, Path=GameData}" Margin="5" />
</Window>
 
First off, to use the toolkit, you have to add a new namespace line in XAML for the toolkit. In this case, I called the namespace dg. Once you have that, you can drop down a XAML tag for the DataGrid. For this example, the DataGrid is bound to an ItemSource called GameData - let's take a look at the backing C# code to find out what that is:
public partial class Window1 : Window
{
  private DataTable _GameData;

  public Window1()
  {
    _GameData = new DataTable();
    _GameData.Columns.Add(new DataColumn("Game Name", typeof(string)));
    _GameData.Columns.Add(new DataColumn("Creator", typeof(string)));
    _GameData.Columns.Add(new DataColumn("Publisher", typeof(string)));

    var row = _GameData.NewRow();
    _GameData.Rows.Add(row);
    row["Game Name"] = "World Of Warcraft";
    row["Creator"] = "Blizzard";
    row["Publisher"] = "Blizzard";

    row = _GameData.NewRow();
    _GameData.Rows.Add(row);
    row["Game Name"] = "Halo";
    row["Creator"] = "Bungie";
    row["Publisher"] = "Microsoft";

    row = _GameData.NewRow();
    _GameData.Rows.Add(row);
    row["Game Name"] = "Gears Of War";
    row["Creator"] = "Epic";
    row["Publisher"] = "Microsoft";

    InitializeComponent();
  }

  public DataTable GameData
  { get { return _GameData; } }
}
 
GameData is a DataTable. If you have played around with the DataGridView in WinForms, you probably recognize the name - it was the easy way to hook up a DataGridView to a database. In this case, I didn't bring a whole database into this sample app - I just populated the DataTable by hand with a little bit of code.

One of the handy things with the WPF DataGrid that with something like a DataTable, the DataGrid can do pretty much everything that we need automatically. With only the code above, we get an application that looks like this:

Screenshot of DataGrid

The DataGrid will, if it can, automatically generate the columns for your data (in this case, it created the three columns "Game Name", "Creator" and "Publisher"). In addition to that, though, you automatically get edit, add, and remove capabilities. If we attach to the RowChanged and RowDeleted events on the DataTable, we can see that changes to the DataGrid are automatically getting pushed back into the DataTable:
private void GameDataRowChanged(object sender, DataRowChangeEventArgs e)
{
  Console.WriteLine("----Row Changed----");
  Console.WriteLine("Action: " + e.Action);
  if (e.Action != DataRowAction.Delete)
  {
    Console.Write("Values: ");
    foreach (var val in e.Row.ItemArray)
    { Console.Write(val + ", "); }
    Console.WriteLine();
  }      
  Console.WriteLine("-------------------");
}
 
After adding a new row to the app, we get this output:
----Row Changed----
Action: Add
Values: My Game, A Creator, A Publisher, 
-------------------
 
If the DataTable was connected up to a database, these changes would get automatically pushed, with little to no work on our part!

Ok, time to get a bit more advanced. Let's say we wanted the Publisher column to be a ComboBox, and we wanted to add a CheckBox column for if the game is available on the Xbox:

Second App Example

Because we have custom column types in there, we can't use automatic column generation anymore. This makes the XAML much more interesting, so let's take a look at it:
<Window x:Class="SOTC_DataGridExample.Window1" Name="This"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
    Title="DataGrid Example" Height="300" Width="300">
  <dg:DataGrid ItemsSource="{Binding ElementName=This, Path=GameData}" 
               Margin="5" AutoGenerateColumns="False">
    <dg:DataGrid.Columns>
      <dg:DataGridTextColumn Binding="{Binding Game Name}" Header="Game Name" />
      <dg:DataGridTextColumn Binding="{Binding Creator}" Header="Creator" />
      <dg:DataGridComboBoxColumn Header="Publisher" x:Name="_PublisherCombo"
                                 SelectedItemBinding="{Binding Publisher}" />
      <dg:DataGridCheckBoxColumn Binding="{Binding On Xbox}" 
                                 Header="On Xbox 360" />
    </dg:DataGrid.Columns>
  </dg:DataGrid>
</Window>
 
Looks kind of similar to how you would use the GridView, doesn't it? However, unlike there, here we have a couple built in column types that we can use - in this case, DataGridTextColumn for editable text, DataGridComboBoxColumn for when we want a combo box, and DataGridCheckBoxColumn for when we want a checkbox. The basics are the same for all three of them - the Header property sets the name of the column, and the Binding property (or SelectedItemBinding in the case of the DataGridComboBoxColumn) binds the value of that column to a column in the backing data store (whether that is a DataTable, some XML, or some other type of data).

The dg:DataGridCheckBoxColumn pretty much works without any extra work, but the DataGridComboBoxColumn takes a little more care. We have to provide it with a collection of entries for the combo box - in this case a collection of publisher names. You can do another binding (although beware, the DataContext will be the particular row in your data source, and so the binding may be difficult), but in this case I just set it to a collection of strings in code:
using System;
using System.Collections.Generic;
using System.Data;
using System.Windows;

namespace SOTC_DataGridExample
{
  public partial class Window1 : Window
  {
    private DataTable _GameData;

    public Window1()
    {
      _GameData = new DataTable();
      _GameData.Columns.Add(new DataColumn("Game Name", typeof(string)));
      _GameData.Columns.Add(new DataColumn("Creator", typeof(string)));
      _GameData.Columns.Add(new DataColumn("Publisher", typeof(string)));
      _GameData.Columns.Add(new DataColumn("On Xbox", typeof(bool)));

      var row = _GameData.NewRow();
      _GameData.Rows.Add(row);
      row["Game Name"] = "World Of Warcraft";
      row["Creator"] = "Blizzard";
      row["Publisher"] = "Blizzard";
      row["On Xbox"] = false;

      row = _GameData.NewRow();
      _GameData.Rows.Add(row);
      row["Game Name"] = "Halo 3";
      row["Creator"] = "Bungie";
      row["Publisher"] = "Microsoft";
      row["On Xbox"] = true;

      row = _GameData.NewRow();
      _GameData.Rows.Add(row);
      row["Game Name"] = "Gears Of War";
      row["Creator"] = "Epic";
      row["Publisher"] = "Microsoft";
      row["On Xbox"] = true;

      _GameData.RowChanged += GameDataRowChanged;
      _GameData.RowDeleted += GameDataRowChanged;

      InitializeComponent();

      _PublisherCombo.ItemsSource = new List<string>() { "Activision", "Ubisoft",
        "Microsoft", "Blizzard", "Nintendo", "Electronic Arts", 
        "Take-Two Interactive" };
    }

    private void GameDataRowChanged(object sender, DataRowChangeEventArgs e)
    {
      Console.WriteLine("----Row Changed----");
      Console.WriteLine("Action: " + e.Action);
      if (e.Action != DataRowAction.Delete)
      {
        Console.Write("Values: ");
        foreach (var val in e.Row.ItemArray)
        { Console.Write(val + ", "); }
        Console.WriteLine();
      }      
      Console.WriteLine("-------------------");
    }

    public DataTable GameData
    { get { return _GameData; } }
  }
}
 
Well, that is it for this introduction to the WPF Toolkit DataGrid. This really only scratches the surface of what you can do with the DataGrid - it is quite the complex control. I will leave you with one tidbit, though - as much as possible the DataGrid follows standard WPF rules - so all the rules for styling, control templates, and data templates still apply. You can look forward to details on that type of customization in a future tutorial - for now, you will have to be satisfied with experimenting on your own. If you would like somewhere to start, you can grab the Visual Studio solution for this example project below - but remember, for it to run, you will need to install the toolkit.

Source Files:
Labels:

Comments

Post a Comment

Popular posts from this blog

C# Snippet - Shuffling a Dictionary [Beginner]

Randomizing something can be a daunting task, especially with all the algorithms out there. However, sometimes you just need to shuffle things up, in a simple, yet effective manner. Today we are going to take a quick look at an easy and simple way to randomize a dictionary, which is most likely something that you may be using in a complex application. The tricky thing about ordering dictionaries is that...well they are not ordered to begin with. Typically they are a chaotic collection of key/value pairs. There is no first element or last element, just elements. This is why it is a little tricky to randomize them. Before we get started, we need to build a quick dictionary. For this tutorial, we will be doing an extremely simple string/int dictionary, but rest assured the steps we take can be used for any kind of dictionary you can come up with, no matter what object types you use. Dictionary < String , int > origin = new Dictionary < string , int >();
1 comment
Read more

C# Snippet - The Many Uses Of The Using Keyword [Beginner]

What is the first thing that pops into your mind when you think of the using keyword for C#? Probably those lines that always appear at the top of C# code files - the lines that import types from other namespaces into your code. But while that is the most common use of the using keyword, it is not the only one. Today we are going to take a look at the different uses of the using keyword and what they are useful for. The Using Directive There are two main categories of use for the using keyword - as a "Using Directive" and as a "Using Statement". The lines at the top of a C# file are directives, but that is not the only place they can go. They can also go inside of a namespace block, but they have to be before any other elements declared in the namespace (i.e., you can't add a using statement after a class declaration). Namespace Importing This is by far the most common use of the keyword - it is rare that you see a C# file that does not h
Post a Comment
Read more

C# WPF Printing Part 2 - Pagination [Intermediate]

About two weeks ago, we had a tutorial here at SOTC on the basics of printing in WPF . It covered the standard stuff, like popping the print dialog, and what you needed to do to print visuals (both created in XAML and on the fly). But really, that's barely scratching the surface - any decent printing system in pretty much any application needs to be able to do a lot more than that. So today, we are going to take one more baby step forward into the world of printing - we are going to take a look at pagination. The main class that we will need to do pagination is the DocumentPaginator . I mentioned this class very briefly in the previous tutorial, but only in the context of the printing methods on PrintDialog , PrintVisual (which we focused on last time) and PrintDocument (which we will be focusing on today). This PrintDocument function takes a DocumentPaginator to print - and this is why we need to create one. Unfortunately, making a DocumentPaginator is not as easy as
Post a Comment
Read more