Working with the Data Grid – Day 1

As we’ve previously mentioned, WPF Elements 5 comes with a powerful new control for displaying data in a tabular format, the Data Grid. While I could write about its super fast performance under heavy loads, or its many options, the first thing to mention is how to get a Data Grid up on the screen. Fortunately that’s a simple matter, and in this introductory post I’ll be showing you how to do just that. From there the Data Grid is easily sculpted to fit the needs of your application, and over this series I’ll continue the process by showing you how to build a fully functional data grid customized to specifications.

You might like to check out the demos of the Data Grid in the Sample Explorer that comes bundled with the 60 day trial of WPF Elements. Alongside being able to see the Data Grid in action XAML and code samples are included, ready to inspire your own applications.

But for now we shall build one from scratch! Where to begin?

Setting up the references

The easiest way is to add a reference to WpfElements.dll and then drag a Data Grid control from the toolbox onto your Window or Page. This will add the licenses.licx file to your properties folder and also add the following namespace to your XAML:

xmlns:ms="http://namespaces.mindscape.co.nz/wpf"

Our Data Grid is going to be fairly uninteresting without binding it to a model. To save time I’ve made the following simple example to populate the grid; you can download the source code here and put it in the code-behind (the archive also includes the finished XAML).

We’re ready to go! Here’s the code:

<Grid>
  <ms:DataGrid ItemsSource="{Binding Data}" />
</Grid>

The Data Grid was designed following WPF best practices therefore setting its model is like any other WPF control – just bind the ItemsSource property to a collection of data. Run it, edit cell data, rearrange column order by dragging and dropping, click on a column header to sort – all behave as expected. All with one line of XAML!

You’ll notice that some of the column widths are a little small for many of the records. Also, while the Generic theme is perfectly serviceable, we’ve got five other theme options so we could apply one of those too. Column widths are set inside the DataGrid control as follows:

<ms:DataGrid ItemsSource="{Binding Data}">
  <ms:DataGrid.Columns>
    <ms:DataGridColumn PropertyName="Name" Width="120" />
    <ms:DataGridColumn PropertyName="Address" Width="140" />
    <ms:DataGridColumn PropertyName="Balance" Width="60" />
  </ms:DataGrid.Columns>      
</ms:DataGrid>

As for the theme, I’ll be setting the entire window theme, but if you just want to set the Data Grid control that’s available by setting the ResourceDictionary inside ms:DataGrid.Resources.

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ms:OfficeBlue />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

Feel free to check out how OfficeSilver, OfficeBlack, Alloy and AlloyLight look too. The finished result:

Data Grid with Office Blue

As you can see it’s fairly easy to get the Data Grid up and running! In future posts we’ll look at some of the properties we can set on the Data Grid, to control sorting, column reordering, selection modes and of course the editors, both built-in and custom. Finally we’ll apply a custom colored template to the Balance column!

Head on over and grab the 60 day trial of WPF Elements to try out the Data Grid and over 50 other controls here:
Download WPF Elements

3 Responses to “Working with the Data Grid – Day 1”

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top