Defining Silverlight DataGrid Columns at Runtime

  • Article
This post has been updated to work with the RTW version of the Silverlight 2 DataGrid.  The code examples are not guaranteed to work with previous Beta versions of the DataGrid. Read more about the features that the Silverlight 2 DataGrid has to offer...

Now that you know the basics of the Silverlight DataGrid and how to specify the Columns in XAML, you might want to customize your DataGrid's columns at runtime.

This process is pretty straight forward, so instead of doing the usual end-to-end walk through, I'm going to provide you with a Rosetta Stone between the static XAML form and the dynamic C#/VB form for the scenario in the last post.

Defining a DataGrid

For any of these columns to be useful you are going to first need a DataGrid to add them to.  The following creates a DataGrid, adds it as a child of the root layout Grid, and sets its ItemsSource to a collection called "source".

C#

 DataGrid targetDataGrid = new DataGrid();
targetDataGrid.ItemsSource = source;
targetDataGrid.AutoGenerateColumns = false;
LayoutRoot.Children.Add(targetDataGrid);

VB

 Dim TargetDataGrid As New DataGrid
TargetDataGrid.ItemsSource = Source
TargetDataGrid.AutoGenerateColumns = False
LayoutRoot.Children.Add(TargetDataGrid)

 

Defining a DataGrid Text Column

The following creates a DataGridTextColumn bound to the FirstName property with a header of "First Name", and adds it to the columns collection of the DataGrid named "targetDataGrid".

Static
  <data:DataGrid x:Name="targetDataGrid">
     <data:DataGrid.Columns>
         <data:DataGridTextColumn Header="First Name" 
             Binding="{Binding FirstName}" />
     </data:DataGrid.Columns>
 </data:DataGrid>

Dynamic

C#

 using System.Windows.Data;

 ...

 DataGridTextColumn textColumn = new DataGridTextColumn();
textColumn.Header = "First Name";
textColumn.Binding = new Binding("FirstName");
targetDataGrid.Columns.Add(textColumn);

VB

 Imports System.Windows.Data

 ...


 Dim TextColumn As New DataGridTextColumn
TextColumn.Header = "First Name"
TextColumn.Binding = New Binding("FirstName")
TargetDataGrid.Columns.Add(TextColumn)

 

Defining a DataGrid CheckBox Column

The following creates a DataGridCheckColumn bound to the Available property with a header of "Available", and adds it to the columns collection of the DataGrid named "targetDataGrid".

Static
  <data:DataGrid x:Name="targetDataGrid">
     <data:DataGrid.Columns>
         <data:DataGridCheckBoxColumn Header="Available " 
             Binding="{Binding Available}" />
     </data:DataGrid.Columns>
 </data:DataGrid>

Dynamic

C#

 using System.Windows.Data;

 ...

 DataGridCheckBoxColumn checkBoxColumn = new DataGridCheckBoxColumn();
checkBoxColumn.Header = "Available";
checkBoxColumn.Binding = new Binding("Available");
targetDataGrid.Columns.Add(checkBoxColumn);

VB

 Imports System.Windows.Data

 ...


 Dim CheckBoxColumn As New DataGridCheckBoxColumn
CheckBoxColumn.Header = "Available"
CheckBoxColumn.Binding = New Binding("Available")
TargetDataGrid.Columns.Add(CheckBoxColumn)

 

Defining a DataGrid Template Column

The following creates a DataGridTemplateColumn bound to the Birthday property with a header of "Birthday", and adds it to the columns collection of the DataGrid named "targetDataGrid".

Static
 <UserControl.Resources>
    <local:DateTimeConverter x:Key="DateConverter" />
</UserControl.Resources>

 ...

 <data:DataGrid x:Name="targetDataGrid" AutoGenerateColumns="False" >
    <data:DataGrid.Columns>
        <data:DataGridTemplateColumn Header="Birthday">
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock 
                        Text="{Binding Birthday, 
                        Converter={StaticResource DateConverter}}" 
                        Margin="4"/>
                </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
            <data:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <basics:DatePicker 
                        SelectedDate="{Binding Birthday, Mode=TwoWay}" />
                </DataTemplate>
            </data:DataGridTemplateColumn.CellEditingTemplate>
        </data:DataGridTemplateColumn>
    </data:DataGrid.Columns>
</data:DataGrid>

Dynamic

There are two ways to dynamically create a template column for a DataGrid.  One is to load in the CellTemplate and CellEditingTemplates as DataTemplates from resources, and the other is to construct the DataTemplates on the fly using XamlReader.

1. Resources Method

This method creates the CellTemplate DataTemplate and the CellEditingTemplate DataTemplate in XAML and stores them as named resources.  Then when the column is created the DataTemplates are used.

Use the below XAML to create the DataTemplates as resources to support the code for this method.

 <UserControl.Resources>
    <local:DateTimeConverter x:Key="DateConverter" />

    <DataTemplate x:Key="myCellTemplate">
        <TextBlock 
            Text="{Binding Birthday, 
            Converter={StaticResource DateConverter}}" 
            Margin="4"/>
    </DataTemplate>

    <DataTemplate x:Key="myCellEditingTemplate">
        <basics:DatePicker 
            SelectedDate="{Binding Birthday, Mode=TwoWay}" />
    </DataTemplate>
</UserControl.Resources>

C#

 using System.Windows.Data;

 ...

 DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
templateColumn.Header = "Birthday";
templateColumn.CellTemplate = (DataTemplate)Resources["myCellTemplate"];
templateColumn.CellEditingTemplate = 
                       (DataTemplate)Resources["myCellEditingTemplate"];
targetDataGrid.Columns.Add(templateColumn);

VB

 Imports System.Windows.Data

 ...


 Dim TemplateColumn As New DataGridTemplateColumn
TemplateColumn.Header = "Birthday"
TemplateColumn.CellTemplate = Resources("myCellTemplate")
TemplateColumn.CellEditingTemplate = Resources("myCellEditingTemplate")
TargetDataGrid.Columns.Add(TemplateColumn)

2. XamlReader Method

This method creates the DataTemplate inline using the XamlReader class.  This class takes a string and parses it to try to build a visual tree.  In this case we are creating DataTemplates.  This method is especially useful if the DataTemplate itself has to be dynamic.  One example being if you wanted to modify what the element in the template was bound to.

Warning: This method is considerably more difficult than the resources method.  I recommend only using this if you need to dynamically create the DataTemplate.

Some things to watch out for:

  1. You will need to declare any XAML namespace that is used in the data template
  2. Any custom XAML namespace needs to specify both the clr-namespace and the assembly
  3. You cannot have white space between the xmlns: and the name of your namespace
  4. External resources cannot be referenced, they need to be declared inline
  5. The entire template is a single line, so if you get a XAML Parse exception, it will always say line 1, however the character is fairly accurate if you were to concatenate all of your lines.
  6. When using the StringBuilder approach shown below, make sure that you have the correct white space at the end of a line so that it is correctly separated when concatenated with the next line.

Now that the warnings are out of the way, here is how you do the equivalent of the code above:

C#

 using System.Windows.Data;
using System.Windows.Markup;
using System.Text;

 ...


 DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
templateColumn.Header = "Birthday";

StringBuilder CellTemp = new StringBuilder();
CellTemp.Append("<DataTemplate ");
CellTemp.Append("xmlns='https://schemas.microsoft.com/winfx/");
CellTemp.Append("2006/xaml/presentation' ");
CellTemp.Append("xmlns:x='https://schemas.microsoft.com/winfx/2006/xaml' ");

//Be sure to replace "YourNamespace" and "YourAssembly" with your app's 
//actual namespace and assembly here
CellTemp.Append("xmlns:local = 'clr-namespace:YourNamespace");
CellTemp.Append(";assembly=YourAssembly'>");

CellTemp.Append("<Grid>");
CellTemp.Append("<Grid.Resources>");
CellTemp.Append("<local:DateTimeConverter x:Key='DateConverter' />");
CellTemp.Append("</Grid.Resources>");
CellTemp.Append("<TextBlock ");
CellTemp.Append("Text = '{Binding Birthday, ");
CellTemp.Append("Converter={StaticResource DateConverter}}' ");
CellTemp.Append("Margin='4'/>");
CellTemp.Append("</Grid>");
CellTemp.Append("</DataTemplate>");

StringBuilder CellETemp = new StringBuilder();
CellETemp.Append("<DataTemplate ");
CellETemp.Append("xmlns='https://schemas.microsoft.com/winfx/");
CellETemp.Append("2006/xaml/presentation' ");
CellETemp.Append("xmlns:x='https://schemas.microsoft.com/winfx/2006/xaml' ");
CellETemp.Append("xmlns:basics='clr-namespace:System.Windows.Controls;");
CellETemp.Append("assembly=System.Windows.Controls' >");
CellETemp.Append("<basics:DatePicker ");
CellETemp.Append("SelectedDate='{Binding Birthday, Mode=TwoWay}' />");
CellETemp.Append("</DataTemplate>");

templateColumn.CellTemplate =
    (DataTemplate)XamlReader.Load(CellTemp.ToString());
templateColumn.CellEditingTemplate =
    (DataTemplate)XamlReader.Load(CellETemp.ToString());
targetDataGrid.Columns.Add(templateColumn);

VB

 Imports System.Windows.Data
Imports System.Text
Imports System.Windows.Markup

 ...


 Dim TemplateColumn As New DataGridTemplateColumn
TemplateColumn.Header = "Birthday"

Dim CellTemp As New StringBuilder
CellTemp.Append("<DataTemplate ")
CellTemp.Append("xmlns='https://schemas.microsoft.com/winfx/")
CellTemp.Append("2006/xaml/presentation' ")
CellTemp.Append("xmlns:x='https://schemas.microsoft.com/winfx/2006/xaml' ")

'Be sure to replace "YourNamespace" and "YourAssembly" with your app's 
'actual namespace and assembly here
CellTemp.Append("xmlns:local = 'clr-namespace:YourNamespace")
CellTemp.Append(";assembly=YourAssembly'>")

CellTemp.Append("<Grid>")
CellTemp.Append("<Grid.Resources>")
CellTemp.Append("<local:DateTimeConverter x:Key='DateConverter' />")
CellTemp.Append("</Grid.Resources>")
CellTemp.Append("<TextBlock ")
CellTemp.Append("Text = '{Binding Birthday, ")
CellTemp.Append("Converter={StaticResource DateConverter}}' ")
CellTemp.Append("Margin='4'/>")
CellTemp.Append("</Grid>")
CellTemp.Append("</DataTemplate>")


 Dim CellETemp As New StringBuilder
CellETemp.Append("<DataTemplate ")
CellETemp.Append("xmlns='https://schemas.microsoft.com/winfx/")
CellETemp.Append("2006/xaml/presentation' ")
CellETemp.Append("xmlns:x='https://schemas.microsoft.com/winfx/2006/xaml' ")
CellETemp.Append("xmlns:basics='clr-namespace:System.Windows.Controls;")
CellETemp.Append("assembly=System.Windows.Controls' >")
CellETemp.Append("<basics:DatePicker ")
CellETemp.Append("SelectedDate='{Binding Birthday, Mode=TwoWay}' />")
CellETemp.Append("</DataTemplate>")


 TemplateColumn.CellTemplate = XamlReader.Load(CellTemp.ToString())
TemplateColumn.CellEditingTemplate = XamlReader.Load(CellETemp.ToString())
targetDataGrid.Columns.Add(TemplateColumn)