Building a DataGrid Control for Silverlight for Windows Phone - Part 1

This article is compatible with the latest version of Silverlight for Windows Phone 7.

Introduction

As you probably know there is no DataGrid available under the Silverlight for Windows Phone platform at the moment. One could object that a DataGrid in Windows Phone is not so much requested for a lot of reasons, size of the screen, user input mode etc. This is true but it is also true that new projects regarding local databases appear day by day on the horizon (i.e. Perst for WP7 , Windows Phone 7 Database) and this opens the space for the development of a class of business applications, even for small devices. With this scenario a specialized UI control to visualize data becomes significant. The challenge here is to build a control which is at the same time clear, understandable and easy-to-use. This is the first of a series of articles in which we will try to achieve the desired result by exploring various ways. In this article I will introduce three possible ways. Then I will focus on a solution in particular, i.e. the porting on the Windows Phone 7 platform of the DataGrid included in the Silverlight Toolkit. The source code for this article can be downloaded from here.

Three possible solutions

In brief, from where to start? A radical solution could be starting from scratch but this would require a considerable effort. Furthermore, when considering a new Windows Phone application you have to take care of what is written in the “UI design and Interaction Guide for Windows Phone Series”; it clearly says that diverging from the Windows Phone 7 Series CTP interaction model is generally not allowed. An excellent starting point could be the tutorial made by Jeff Karlson which explains in a very detailed and complete way how to build your own DataGrid for Silverlight.

From the foregoing, it is preferable, in a more pragmatic way, to take a look around and look for something similar in the neighbourhood. For instance, starting from the DataGrid included in the WPF Toolkit could be a possibility; in fact, it is provided with the source code. Another way is focusing on the DataGrid included in the Silverlight Toolkit and looking for the related source code in the subdirectories. Another solution is to take into consideration products from third parties like AgDataGrid of DevExpress. What we really will do in the article is highlight the difficulties behind the conversion of the WPF Data grid, then give a taste of the porting of the Silverlight Toolkit DataGrid. In a next article we will face the porting of AgDataGrid to Windows Phone.

Features that a DataGrid Control must have

What is the main feature a DataGrid should have? Probably the “autogeneration of columns” is a strong candidate. In fact, knowing that the control is self-sufficient is in most cases very useful, but it is not the only thing. A header columns and the possibility to handle various column types are other inalienable characteristics. As for the appearance, styling properties should be present. Eventually a due degree of interactivity must be granted: the user should be able to select rows, change the content of a cell, show a row detail.

First solution : a look to the WPF DataGrid

Why should a Windows Phone developer be interested in WPF Datagrid? Well, the main reasons are that Silverlight, as commonly known, is often presented as a subset of WPF and that the source code of WPF Datagrid is available; this looks good on paper. Let’s give a look then at the WPF Datagrid. Looking at the hierarchical tree of the main class, DataGrid visibly derives from two abstract classes, MultiSelector and Selector, which extend the base class ItemsControl by providing selection capabilities.

The first thing to pay attention to is that the code makes massive use of property system capabilities which do not exist in Silverlight and for which you have to find a workaround if you want to make the conversion:

• several default dependency properties coming from the base class ItemsControl are modified through the OverrideMetadata method. Unfortunately the Silverlight for Windows Phone (not even Silverlight 4) version of DependencyProperty class does not support this method. A workaround could be, as suggested here, to involve an extra DependencyProperty declaration and binding of the original dependency property to this one.
• there are a lot of Coerce-value callbacks. You have to implement an alternative in this area by using property-changed callbacks, which are supported in Silverlight.
• most custom dependency properties are read-only. You cannot do the same in Silverlight, any external code can set the dependency property through SetValue method.
• FrameworkPropertyMetadata is often used for the type used for dependency property metadata, rather than the base metadata types PropertyMetadata. A workaround can be found here.

Additionally, editing actions and other actions are handled through commands using the CommandManager class which is missing in Silverlight. Here you also have to find a solution. In this blog there are some interesting hints you may attempt to use.

Before going any further to describe other platform-specific features used by the code, I think the above-described functioning is enough to say that the porting of WPF DataGrid to the Silverlight for Windows Phone 7 is not that funny as it appeared at the beginning and maybe we should try other ways.

Second solution: a look to the Silverlight DataGrid

The good news is that the way is much simpler than the one described in the previous paragraph. The bad news is that the source code for the current Toolkit’s DataGrid is targeted for Silverlight 4 whilst Windows Phone 7 runs a customized version of Silverlight 3 with just some capabilities of Silverlight 4. But do not worry, you can retrieve an older release from CodePlex (i.e. the one for Silverlight 3) and get the source code. If you do so and then look at the code you will notice that surprisingly (or not…) the scheme is quite different from the one used for WPF DataGrid. In fact, the Silverlight DataGrid version derives directly from Control class where the WPF DataGrid, as we have seen, derives from the ItemsControl class through two abstract classes, MultiSelector and Selector. There are a lot of other differences, of course but I do not want to annoy you with useless details; I just want to give you some guidance on how to get working the source code on Windows Phone 7. First of all you have to create a new Windows Phone Class Library Project, then locate the “Source code.zip” file included in the directory of your Silverlight Toolkit installation and expand it. Copy all the files and subdirectories under < toolkit source code files >\ System.Windows.Controls.Data into the directory of your project and import them in Visual Studio. Add the following references:

• <…>\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Controls.Data.dll
• <…>\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.ComponentModel.DataAnnotations.dll
• <…>\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Controls.Data.Input.dll

Change the namespace in each file from “System.Windows.Controls” to something else (I used PhoneDataGridControl) in order to avoid some strange cross references with the System.Windows.Controls.Data.dll we added above; now if you try to build the solution you surely get a lot of errors and warnings; so you must have the patience to add basic references here and there, Visual Studio will help you. If you want to skip these steps you can download the working code from the link at the beginning of the article. Here below you can see the DataGrid running on the emulator with paging enabled .

Third solution: a look to the AgDataGrid DataGrid

The AgDataGrid Control is a beautiful tool made available by DevExpress as a substitute of the standard Silverlight Datagrid Control. You can view all the features here . Next to the commercial version, DevExpress provides a free version with the full source code after registration at the following page. I do not want to say much here because the topic will be discussed in depth in the next article. I just want you to know that with some tricks the porting is possible.

Conclusion

In this article we have considered the possibility to create a DataGrid Control for the Windows Phone 7 platform. We have spotted three possible ways, i.e. starting from the WPF DataGrid or the Silverlight Control or finally the AgDataGrid Control. We have investigated each of these ways and we have soon discarded the WPF solution; we focused on porting the Silverlight DataGrid Control reaching the first goal; we let the reader imagine that the third solution is feasible but we will check this in the next article.