In this post I am going to show you the basic example of Creating the Page with DataBound Silverlight 2.0 DataGrid, and also I will show you how to format the Data Using IValueConverter in DataGrid dynamically.
Create a new project and Select Silverlight Application.
Name your application and select Ok, select the options as given in the screen below.
Once you select Ok, your solution should look something similar to the one given in the screen below.
Select the DataGrid from the ToolBox and Drag and Drop it on you page, you can also go and Add the DataGrid manually in you XAML code, but if you are doing so then you may also have to add the reference to the assembly and define the custom tag to use for your DataGrid. This is done automatically when you do the Drag and Drop of the control.
Now if you are aware of the Silverlight Layouts then you can format your page and position your DataGrid in more better way as given in the Code below, in the code below I am defining the Rows and Adding the Header for the Page and in the next row I am placing my DataGrid.
Now my next task is to create the sample Data to bind the DataGrid, if you already have some data source then you can your that only, or you can use the one as given in the code below. I am creating the Player.cs and PlayerCollection.cs class, which will have to List of Players. Then in GetDemoData in Player.cs I am populating the demo data.
Now I have all the data ready to bind the Silverlight DataGrid, so I will modify my Page.xaml.cs as the one given below. In the code below I am just binding the Silverlight DataGrid using the ItemSource property of the DataGrid.
Now you can run the application and can see the output.
Now one thing you can notice in the screen below, i.e the DOB column, the dates are not coming what we are expecting and also the column name is also not very Readable, so we need to define the ColumnTemplates and add few more codes to customize our data and have more control on the Desing.
To format the DOB column, first I have Created the class, I na
med it here in my project as DateConverter.cs, and also added the reference to System.Windows.Data
Now all we need to derive the Class from IValueConverter Interface and implement the interface, like the one given below
Next you need to Use template and set the following property in your DataGrid
Run the application now, you will not see anything in your default.aspx, because we have set the AutoGenerateColumns as False, so we have to write few bits of code to define our own Column Template for the DataGrid, I personally would prefer using the DataGrid.Column Template, as this gives me more control over the data and the design.
Add the following code inside your DataGrid
Run the application.
You can see the same output, except the Header text of DOB, you had when you had the AutoGenerateColumns=True,
Now I am going to show how you can use your DateConverter.cs class to format your DateTime, to do so
First you need to import the class which we are going to use to format the DateTime, and also we have to define the tag, this can be done by adding the following code in your UserControl Tag
The completed UserControl Tag will look something like this as given below
Now add the following code in your XAML code just above your LayoutRoot Grid Layout
Now you have all the required classes and tag defined for your DateConverter.cs, we have to specify the Column in which we are going to apply this format, as currently we are formatting the DateTime, so we have to apply this for our DOB column, by modifying the following code, as given below
Now run your application you will get the following output
In the screen above you can notice the Date of Birth date format,
So these are the very basic example I had given here to use the Silverlight 2.0 DataGrid and format the data in the Silverlight 2.0 DataGrid.
You can be more creative and can design the whole new look itself and can get the more control on the data using Silverlight 2.0 DataGrid control.
You can view the more formatted version in my asp.net weblog hereSource Code of the complete solution can be downloaded from here