(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

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

(9 votes)
Walter Ferrari
>
Walter Ferrari
Joined Dec 17, 2009
Articles:   19
Comments:   12
More Articles
10 comments   /   posted on Aug 16, 2010
Categories:   Windows Phone , Controls

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

This article is Part 1 of the series Building a DataGrid Control for Silverlight for Windows Phone.

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.

datagrid

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 .

datagridWithPaging

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.


Subscribe

Comments

  • -_-

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


    posted by ram on Aug 23, 2010 21:23

    I think there may be a reason why there is no DataGrid for Windows Phone 7... Grids on a mobile phone is the worst thing ever: it's not ergonomic. It's also an easy path when you don't want to bother with UI design. I dream of a world where DataGrids would have never existed.

  • -_-

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


    posted by Jan Slodicka on Feb 17, 2011 17:46

    Right now I am porting Silverlight DataGrid so that it could be offered as part of Resco MobileLight Toolkit. Be warned whoever tries this way - its huge amount of work. So far I spent 10 days and it might need a lot more.

    Some hints:

    - Some parts should better be omitted (grouping for example). It's not only dead code (I don't think groups can be controlled on WP7), but it needs classes defined in SVL 3 binaries (libs).

    - You can get rid of these libs by finding needed classes on the web. For example System.ComponentModel.DataAnnotations sources are on http://www.java2s.com/Open-Source/CSharp/Web-Frameworks/Silverlight%20Toolkit/System/ComponentModel/DataAnnotations/CatalogDataAnnotations.htm (Ms-PL licence)

    - You will find that DataPager control is for birds. Better remove it. (Although then you lose data virtualization. However, this is based on PagedCollectionView, which is not supported on WP7. Right now I am ignoring this, but sooner or later it will have to be solved.)

    - Scrollbar support ditto. Nonsense for WP7. You will have to fit ScrollViewer into the DataGrid template and do some coding to get it working properly. I am not sure how it will co-operate with dynamic row templates (details, validation).

    - This way you can get (seemingly) working WP7 DataGrid. However, a lot of problems can be expected.

    - WP7 theming has to be done.Possibly another big topic.

  • MauricioFernandez

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


    posted by MauricioFernandez on Jun 25, 2011 02:45

    If you try to use this code with Mango you will have some conflicts I think you can solve those conflicts using an assembly alias and something like this:

    extern alias windowsdata;
    using IPagedCollectionView = windowsdata::System.ComponentModel.IPagedCollectionView;
    using PagedCollectionView = windowsdata::System.Windows.Data.PagedCollectionView;



  • IsaacCastaeda

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


    posted by IsaacCastaeda on Oct 13, 2011 20:56
    @MauricioFernandez tienes algun sitio o algo asi ? Pude compilar el componente pero al aplicarlo me sale el error de que no puede encontrar un ensamblado pero no me dice detalles. Tal vez es eso que indicas, pero soy medio nuevo en esto de C# y Silverlight y no me sale. Mi email sunco007@hotmail.com - O quiza para este entonces tengas alguna otra manera de ver datos en un tipo DataGrid
  • chetansonawane

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


    posted by chetansonawane on Feb 09, 2012 08:52
    i need not to show all the columns , how can i bind required columns?
  • remyavinod

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


    posted by remyavinod on May 27, 2012 15:45
    I need to bind the datas in grid from database using webservices in windows phone application.But ther is no control included in the Windows phone 7 application.So how can i get a datagrid.if i use third party tools how can i add reference to it.
  • shaikamair1

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


    posted by shaikamair1 on Mar 01, 2013 08:28

    Can anyone please help me,how to bind my table data to the grid control  which is stored in isolated data storage   of windows phone 7.

  • shaikamair1

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


    posted by shaikamair1 on Mar 01, 2013 08:30
    can any one please help,how to bind the table data to the grid control which is stored in isolated data storage of windows phone 7
    
    
    
                            
  • KojoDavis

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


    posted by KojoDavis on Jun 04, 2013 17:22

    Hi

    following your tutorial and have downloaded the code for the article but when i build it .I get an error stating 

    Error    2    The type 'System.Windows.Data.CollectionViewGroup' exists in both 'c:\Users\dell\Downloads\DataGrid_Silverlight_ported_to_PHONE\PhoneDataGrid\Silverlight3Libraries\System.Windows.Data.dll' and 'c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\Silverlight\v4.0\Profile\WindowsPhone71\System.Windows.dll'    C:\Users\dell\Downloads\DataGrid_Silverlight_ported_to_PHONE\PhoneDataGrid\DataGrid\DataGridRowGroupInfo.cs  

    Please any help on this

  • sarwar

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


    posted by sarwar on Apr 01, 2014 10:25

    I am using multiple gridview but all gridview headers will showing on each gridview.

    for example if each of the following gridview have their own header as the following:

    gridview1: col1, col2

    gridview2: col3,col4

    gridview3: col5,col6


    then each gridview contain col1 to col6.

    how to do to show only their own columns?

Add Comment

Login to comment:
  *      *       

From this series