Download Sample Project (199.97 kb)
In previous article How to customize DataGrid I demonstrated how easy it was to change apperance of whole grid row based on certain data values in LoadingRow event handler. But if you want to customize appearance of each cell at run time, that is whole different story.
Unfortunately DataGrid control did not expose styling properties on DataGridColumn or DataCell directly. You can access individual columns in grid but you can't change styles back and forth on them. The reason is that once a Style object gets loaded and associated with a UI element in visual tree of your Silverlight application, it gets sealed and can't be modified. Well as we say Where there is will, there is way.
Thanks to data binding architecture in silverlight control, you can bind any property of a UI element to DataContext. So you can take advantage of that fact and bind background color to a value in your data object. One of the binding parameters is Converter that you can specify to convert attached value to whatever visual representaion you want to. For example in my sample project, I want to change background color of third column in grid to certain color when ListPrice is greater than 500. So what I need is a converter that will translate this decimal value into SolidColorBrush or some other brush.
Implementing converter
So first step is to create a new class that implements IValueConverter interface. You will only need to implement Convert method of this interface because we are only interested in converting ListPrice value to color. Followin code snippet shows the implementation in sample project.
public class CellValueColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
decimal val = decimal.Parse(value.ToString());
if (val > 500)
{
return new SolidColorBrush(Color.FromArgb(255, 200, 200, 200));
}
else
{
return new SolidColorBrush(Color.FromArgb(255, 155, 155, 155));
}
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Define resource for converter
Now we need to add this converter as resource in control. And also define the prefix in namesapce definitions.
<UserControl xmlns:SilverGrid="clr-namespace:SilverDataGrid">
<UserControl.Resources>
<SilverGrid:CellValueColorConverter x:Key="bgColorConverter"/>
</UserControl.Resources>
</UserControl>
Bind background to data and converter
Now last step is to bind Background property of Canvas for given DataTemple to ListPrice and our converter resource.
<data:DataGridTemplateColumn Header="List Price">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Canvas Background="{Binding ListPrice ,Converter={StaticResource bgColorConverter}}"
Width="Auto" Height="Auto">
<TextBlock Text="{Binding ListPrice}"></TextBlock>
</Canvas>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
And you are done. You can download the project for this sample and see all this in action.
Subscribe