This article is compatible with the latest version of Silverlight.
This is my third article about the DataGrid control in Silverlight. The first one was a brief introduction to the control and the second one was focused on some basic customizations of it. This one will discuss the column types that are present in the DataGrid control. There are three column types - TextColumn, CheckBoxColumn and a TemplateColumn.
Text column type
The DataGridTextColumn can be used for displaying plain text. It also gives the possibility to style the text with the standard properties FontFamily, FontSize, Foreground etc. Here is how we can define a Text column in both Xaml and C#:
Xaml
<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
<my:DataGrid.Columns>
<my:DataGridTextColumn Binding="{Binding Group}" Header="Group"></my:DataGridTextColumn>
</my:DataGrid.Columns>
</my:DataGrid>
C#
DataGridTextColumn textColumn1 = new DataGridTextColumn();
textColumn1.Header = "Group";
textColumn1.Binding = new Binding( "Group" );
Foods.Columns.Add( textColumn1 );
CheckBox column type
This column type can be used to display a check box in the cells of the column. It can be used to display the value of a boolean property. The following code shows how to define such a column in both Xaml and code behind:
Xaml
<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
<my:DataGrid.Columns>
<my:DataGridCheckBoxColumn Binding="{Binding IsAvailable}" Header="Available?"></my:DataGridCheckBoxColumn>
</my:DataGrid.Columns>
</my:DataGrid>
C#
DataGridCheckBoxColumn checkboxColumn1 = new DataGridCheckBoxColumn();
checkboxColumn1.Header = "Available?";
checkboxColumn1.Binding = new Binding( "IsAvailable" );
Foods.Columns.Add( checkboxColumn1 );
Template column type
The template column type uses a template in order to display the information of the cell. Using this type of a column we can display any information, not only boolean or text data. Using this column type we can have more than one binding in a cell. The Template column also gives us more possibilities for styling as we can style each control used in the template. Here is how we can define a column of this type:
<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
<my:DataGrid.Columns>
<my:DataGridTemplateColumn Header="Quantity">
<my:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Quantity}"
FontFamily="Trebuchet MS"
FontSize="11"
Margin="5,5,5,5"></TextBlock>
</DataTemplate>
</my:DataGridTemplateColumn.CellTemplate>
</my:DataGridTemplateColumn>
</my:DataGrid.Columns>
</my:DataGrid>
In this case we duplicate the behavior of the Text column using a Template column with a TextBlock in it. Much more cool things can be done with the Template column, but that's up to your imagination.
The Text column type has a default EditingTemplate and the CheckBox column uses one template, but for the Template column type we have also to define a CellEditingTemplate, else the CellTemplate will be used as CellEditingTemplate:
<my:DataGrid x:Name="Foods" AutoGenerateColumns="False">
<my:DataGrid.Columns>
<my:DataGridTemplateColumn Header="Quantity">
<my:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBlock>
</DataTemplate>
</my:DataGridTemplateColumn.CellTemplate>
<my:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<TextBox Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBox>
</DataTemplate>
</my:DataGridTemplateColumn.CellEditingTemplate>
</my:DataGridTemplateColumn>
</my:DataGrid.Columns>
</my:DataGrid>
A TextBox is used in the DataTemplate, so we can edit the value of the TextBlock.
If we want to define the column from the code behind we must have the template and the editing template defined as Resources. Here it is:
<UserControl.Resources>
<DataTemplate x:Key="PlainTextColumnTemplate">
<TextBlock Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBlock>
</DataTemplate>
<DataTemplate x:Key="PlainTextColumnEditingTemplate">
<TextBox Text="{Binding Quantity}" FontFamily="Trebuchet MS" FontSize="11" Margin="5,5,5,5"></TextBox>
</DataTemplate>
</UserControl.Resources>
And in the code behind we have:
DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
templateColumn.Header = "Quantity";
templateColumn.CellTemplate = this.Resources[ "PlainTextColumnTemplate" ];
templateColumn.CellEditingTemplate = this.Resources[ "PlainTextColumnEditingTemplate" ];
Foods.Columns.Add( templateColumn );
As you can see the Template column type can provide us with a lot of possibilities to customize our grid, because in the Template we can use every Silverlight control. For example we can define a column which cells contain a picture and a date or define a column with a date picker.
Summary
That was all about the column types. I'm sure that I left a lot of questions unanswered, but the answers are coming with the next articles. For example today we mentioned the Edit mode of the DataGrid. The next article will be focused on it and will give some explanations of how it works, which events are raised and answer the questions that are related to the EditingTemplates. So stay tuned.