Conditional Formatting in the Silverlight DataGrid
I’ve been an asp.net developer for some time now and I was excited to jump on to Silverlight when it 2.0
was released a few months ago. One thing I really struggled with was applying conditional formatting to
the individual cells in the DataGrid control. Coming from an asp.net background, I carried a lot of
assumptions with me (big mistake). I thought I could get a hold of the rows or cells collection and have
my way with it, but no such luck. I stumbled down several paths which all ultimately lead to dead ends.
After killing hours (maybe days) on trying to figure this out, I had to let it go and move on. Now a month
later I decided to give it another shot and I finally got it. The answer was right in front of me all along.
I knew about the IValueConverter interface, but I didn’t fully understand its capabilities. I thought it was
only used for converting an object into a text representation or vice versa. Actually, you can return
anything you want from it. So you can return a Button, Grid, or whatever.
Another aspect I couldn’t figure out was how to get access to page members from within the Convert
method. For example, I wanted to render a button in the cell and wire up the button’s click event to a
method in the page. Sure, you could do this to a certain extent using templates, but then I couldn’t
find a way to change the template conditionally based on a value in the bound data item.
The solution I came up with was to create a delegate along with a class which implemented the
IValueConverter interface and exposed two events. One for converting and the other for converting
back. I can then declare this converter in the resources collection and setup a handler in the page
as shown below.
<UserControl.Resources>
<local:UniversalConverter x:Key="ageConverter" Converting="ConvertAge" />
<local:UniversalConverter x:Key="nameConverter" Converting="ConvertName" />
</UserControl.Resources>
Here is the markup i used in the “First Name” column of the DataGrid.
<data:DataGridTemplateColumn Header="First Name">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl Content="{Binding Converter={StaticResource nameConverter}}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
Here is the “ConvertName” method I wired up from the converter defined in the resources collection.
1: private object ConvertName(object value, Type targetType,
object parameter, CultureInfo culture) {
2: Employee employee = value as Employee;
3: if (employee == null) {
4: return value;
5: } 6: 7: if (employee.FirstName.Contains('a')) {
8: Button btn = new Button();
9: btn.Content = employee.FirstName; 10: btn.Click += ((sender, e) => { 11: HtmlPage.Window.Alert(12: string.Format(
"There is a button here because \"{0}\" contains an \"a\".",
13: employee.FirstName)); 14: }); 15: 16: return btn;
17: }18: return new TextBlock {Text = employee.FirstName};
19: }
This is the IConverter class and delegate I created to handle the conversions.
1: public class UniversalConverter : IValueConverter {
2: 3: public object Convert(object value, Type targetType,
object parameter, CultureInfo culture) {
4: return this.OnConverting(value, targetType,
parameter, culture);
5: } 6: 7: public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture) {
8: return this.OnConvertingBack(value, targetType,
parameter, culture);
9: } 10: 11: protected object OnConverting(object value, Type targetType,
object parameter, CultureInfo culture) {
12: UniversalConverterHandler handler = this.Converting;
13: if (handler != null) {
14: return handler(value, targetType, parameter, culture);
15: }16: return value;
17: } 18: 19: protected object OnConvertingBack(object value, Type targetType,
object parameter, CultureInfo culture) {
20: UniversalConverterHandler handler = this.ConvertingBack;
21: if (handler != null) {
22: return handler(value, targetType, parameter, culture);
23: }24: return value;
25: } 26: 27: public event UniversalConverterHandler Converting;
28: 29: public event UniversalConverterHandler ConvertingBack;
30: 31: } 32: 33: public delegate object UniversalConverterHandler(object value, Type targetType,
object parameter, CultureInfo culture);
And finally, here is a screenshot of the DataGrid. (Ugly, I know, but it proves my point.) 
Here is a link to the complete solution.
I hope you find this useful and I look forward to hearing feedback and suggestions.
Most importantly, let me know if you know of a better way to do this.
Thanks
-Joe