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;
LayoutRoot.Children.Add(targetDataGrid);
VB
Dim targetDataGrid As New DataGrid
targetDataGrid.ItemsSource = Source
LayoutRoot.Children.Add(targetDataGrid)
Defining a DataGrid Text Column
The following creates a DataGridTextBoxColumn bound to the FirstName property with a header of "First Name", and adds it to the columns collection of the DataGrid named "targetDataGrid".
Static
<my:DataGrid x:Name="targetDataGrid">
<my:DataGrid.Columns>
<my:DataGridTextBoxColumn Header="First Name"
DisplayMemberBinding="{Binding FirstName}" />
</my:DataGrid.Columns>
</my:DataGrid>
Dynamic
C#
using System.Windows.Data;
...
DataGridTextBoxColumn textBoxColumn = new DataGridTextBoxColumn();
textBoxColumn.Header = "First Name";
textBoxColumn.DisplayMemberBinding = new Binding("FirstName");
targetDataGrid.Columns.Add(textBoxColumn);
VB
Imports System.Windows.Data
...
Dim TextBoxColumn As New DataGridTextBoxColumn
TextBoxColumn.Header = "First Name"
TextBoxColumn.DisplayMemberBinding = New Binding("FirstName")
TargetDataGrid.Columns.Add(TextBoxColumn)
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
<my:DataGrid x:Name="targetDataGrid">
<my:DataGrid.Columns>
<my:DataGridCheckBoxColumn Header="Available "
DisplayMemberBinding="{Binding Available}" />
</my:DataGrid.Columns>
</my:DataGrid>
Dynamic
C#
using System.Windows.Data;
...
DataGridCheckBoxColumn checkBoxColumn = new DataGridCheckBoxColumn();
checkBoxColumn.Header = "Available";
checkBoxColumn.DisplayMemberBinding = new Binding("Available");
targetDataGrid.Columns.Add(checkBoxColumn);
VB
Imports System.Windows.Data
...
Dim CheckBoxColumn As New DataGridCheckBoxColumn
CheckBoxColumn.Header = "Available"
CheckBoxColumn.DisplayMemberBinding = 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>
... <my:DataGrid x:Name="targetDataGrid" AutoGenerateColumns="False" >
<my:DataGrid.Columns>
<my:DataGridTemplateColumn Header="Birthday">
<my:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Birthday,
Converter={StaticResource DateConverter}}"
FontFamily="Trebuchet MS" FontSize="11"
Margin="5,4,5,4"/>
</DataTemplate>
</my:DataGridTemplateColumn.CellTemplate>
<my:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<DatePicker
SelectedDate="{Binding Birthday, Mode=TwoWay}" />
</DataTemplate>
</my:DataGridTemplateColumn.CellEditingTemplate>
</my:DataGridTemplateColumn>
</my:DataGrid.Columns>
</my:DataGrid>
Dynamic
There are two ways to dynamically create a template column for a DataGrid. On
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 co
<UserControl.Resources>
<local:DateTimeConverter x:Key="DateConverter" />
<DataTemplate x:Key="myCellTemplate">
<TextBlock
Text="{Binding Birthday,
Converter={StaticResource DateConverter}}"
FontFamily="Trebuchet MS" FontSize="11"
Margin="5,4,5,4"/>
</DataTemplate>
<DataTemplate x:Key="myCellEditingTemplate">
<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. On
Warning: This method is considerably more difficult than the resources method. I recommend on
Some things to watch out for:
- You will need to declare any XAML namespace that is used in the da
ta template - Any custom XAML namespace needs to specify both the clr-namespace and the assembly
- You cannot have white space between the xmlns: and the name of your namespace
- External resources cannot be referenced, they need to be declared inline
- 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.
- 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 co
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='http://schemas.microsoft.com/client/2007' ");
CellTemp.Append("xmlns:x='http://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("FontFamily='Trebuchet MS' FontSize='11' ");
CellTemp.Append("Margin='5,4,5,4'/>");
CellTemp.Append("</Grid>");
CellTemp.Append("</DataTemplate>");
StringBuilder CellETemp = new StringBuilder();
CellETemp.Append("<DataTemplate ");
CellETemp.Append("xmlns='http://schemas.microsoft.com/client/2007' ");
CellETemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>");
CellETemp.Append("<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 = 'http://schemas.microsoft.com/client/2007' ")
CellTemp.Append("xmlns:x = 'http://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("FontFamily='Trebuchet MS' FontSize='11' ")
CellTemp.Append("Margin='5,4,5,4'/>")
CellTemp.Append("</Grid>")
CellTemp.Append("</DataTemplate>")
Dim CellETemp As New StringBuilder
CellETemp.Append("<DataTemplate ")
CellETemp.Append("xmlns = 'http://schemas.microsoft.com/client/2007' ")
CellETemp.Append("xmlns:x = 'http://schemas.microsoft.com/winfx/2006/xaml'>")
CellETemp.Append("<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)
