Bindings in Silverlight - Binding User Defined Data to the Data grid

Now to the second lesson of this mini series : By user defined data , i mean custom classes .  We can create a class Vals , that has two members val1 and val2. We will try to bind the Datagrid with these columns , both automatically and explicitly.

Here are the steps we will follow for automatically generating columns.
1) Create the  user defined class.
2) Define a list/collection of the class objects.
3) Set the autogenerate property of the Datagrid to true
4) Assign the collection to the DataGrid's ItemSource property.

Pretty much the same thing as binding simple data, but it gets more fun when we go into manually generating columns.

Step1: Lets create the user defined class in your Project . Either create a new class file, or write the class in the MainPage.xaml.cs

public class Vals{
public int val1 {get;set;}
public int val2 {get;set;}
}

Thats it. the simplest class i could think of.  If you want to add more fields, go ahead and add them, but make sure that you add the {get;set;} block.   Your datagrid will not display any items, if the getter and setter are absent.


Step 2:  Lets create a sample collection . I tend to create a List  most of the time.

List myData = new List();
for(int i=0;i<10;i++)
 {
 v.val1 = i * 2;
 v.val2 = i * 5;
 myData.Add(v);
 }

 Step 3:  You can change the AutoGenerateColumns  property of the datagrid to True.  By default it will be false.  Once this is done, set the ItemSource  property to myData; dataGrid1.AutoGenerateColumns = false; dataGrid1.ItemsSource = myData; You can run and see your Datagrid with the user defined data.

And now the important part.  Right now, you are having two fields val1 and val2 in your class. Suppose you only want to display one field.  You obviously cant use the AutogenerateColumns=True  alone.

So we need to create the DataGridColumn manually in Xaml , or through code. We will now see how this can be done.

Step 1: In the Xaml code, go to the place where your DataGrid is present.
You can observe that the AutoGenerateColumns property is false. If you don't define that DataGridColumn, you will get an empty datagrid. So replace the above code with the column definitions.

<sdk:DataGrid AutoGenerateColumns="False" Height="189" HorizontalAlignment="Left" Margin="50,51,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="280" > 
<sdk:DataGrid.Columns> 
<sdk:DataGridTextColumn Binding="{Binding val1}">
</sdk:DataGridTextColumn> 
</sdk:DataGrid.Columns>
</sdk:DataGrid>



Now , when you see in your browser, you will find that only one column shows up.

However, you can do all of this in Code, without changing the Xaml. Just write the following code for it.
(Create a DataGridTextColumn and assign proper bindings to it. )

DataGridTextColumn dgc = new DataGridTextColumn();
dgc.Header = "Val1";
dgc.Binding = new Binding("val1");
dataGrid1.Columns.Add(dgc);


Thats it for this part.  Try this out with various combinations and types of collections. More on the DataGrid in the next part , including value converters