Xceed Datagrid Custom Cell Styling
As good as Xceed Datagrid is, it’s lacking some basic functionality or the documentation to find the workarounds. We experience this when we tried to custom change the background of individuals cells base on their value. A colleague of mine was working on this issue during the last week. After some extensive trial and error he came out with this solution.
Basically we need to register a Xceed.Wpf.DataGridControl.DataRow event, Any event that gets called for all the DataRows in the DataGrid will suffice. We decided to use the DataRow.SizeChangedEvent.
EventManager.RegisterClassHandler(typeof(Xceed.Wpf.DataGrid.DataRow),
Xceed.Wpf.DataGrid.DataRow.SizeChangedEvent, new RoutedEventHandler(onDataRowSizeChanged));
We register a class handler event. This could be done inside the main constructor of your window. After that we implement the handler method as such:
void onDataRowSizeChanged(object sender, RoutedEventArgs e)
{
Xceed.Wpf.DataGrid.DataRow dRow = (sender as Xceed.Wpf.DataGrid.DataRow); //Getting the data value of the cells wanted: DataRowView drView = dRow.DataContext as DataRowView;
//Do our custom sytling base on data Values
if (drView["equity"].ToString() == "0")
{
dRow.Cells["equity"].Background = Brushes.Red;
}
if (drView["balance"].ToString() == "0")
{
dRow.Cells["balance"].Background = Brushes.LightGreen;
}
if (drView["longvalue"].ToString() == "2282508")
{
dRow.Cells["longvalue"].Background = Brushes.Green;
dRow.Cells["longvalue"].Foreground = Brushes.Blue;
}} <Window x:Class="WPFPeformanceTest.XceedDataGrid"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"xmlns:xauto="clr-namespace:HelperClasses;assembly=HelperClasses"Title="Xceed DataGrid Custom Cell Style" Height="250" Width="800"WindowStyle="ThreeDBorderWindow"><Grid Name="dataGrid1"><xauto:XceedAutoFitColumnGrid Grid.Row="0" x:Name="accountsGrid" Margin="0,0,0,29" AutoCreateColumns="False"EditTriggers="BeginEditCommand,ActivationGesture" ><xcdg:DataGridControl.Columns><xcdg:Column FieldName="ACCOUNT" ReadOnly="True" Title="account" /><xcdg:Column FieldName="DEPT" ReadOnly="True" Title="dept" /> <xcdg:Column FieldName="longvalue" ReadOnly="True" Title="longvalue"/><xcdg:Column FieldName="balance" Title="balance" /><xcdg:Column FieldName="equity" ReadOnly="True" Title="equity"/><xcdg:Column FieldName="pending" Title="pending" /><xcdg:Column FieldName="reserves" ReadOnly="True" Title="reserves" /></xcdg:DataGridControl.Columns> </xauto:XceedAutoFitColumnGrid> <Label HorizontalAlignment="Left" x:Name="label1" VerticalAlignment="Bottom" Width="201.63" Height="23.2766666666667">Label</Label></Grid></Window>The end result can be viewed at the top of the page.
I notified the Xceed team so they can consider this, thanks.
What could also have been done is use a style with DataCell as its TargetType that contains DataTriggers that set the background to the desired color depending on the value of a cell.
<!–
–>
Another option would be to create a DataTemplateSelector that returns the appropriate DataTemplate. The selector can then be assigned to any column’s CellContentTemplateSelector.
public override System.Windows.DataTemplate SelectTemplate( object item, System.Windows.DependencyObject container )
{
ContentPresenter presenter = container as ContentPresenter;
if( presenter != null )
{
Window window = Application.Current.MainWindow;
if( ( string )presenter.Content == “VINET” )
return window.FindResource( “PinkTemplate” ) as DataTemplate;
if( ( string )presenter.Content == “HANAR” )
return window.FindResource( “BlueTemplate” ) as DataTemplate;
}
return base.SelectTemplate( item, container );
}
oops.. comments
Hello Jenny,
We tried to implement your first suggested solution, however the datatrigger will change the background of all the cells of the DataRow not just one.
Can you please post a complete example of the DataTemplateSelector.
Somehow i missed the point. Probably lost in translation
Anyway … nice blog to visit.
cheers, Relinquisher
“We tried to implement your first suggested solution, however the datatrigger will change the background of all the cells of the DataRow not just one.”
I get the same thing, I’ve also tried to limit the style to a specific column by making the columns template but just cant get it to work
. Its seem to go against the WPF way to resort to code but meh… if it has to be. I’m sure if I was a seasoned WPF developer this would be easier but I’m not.
There are lots of people asking this on the Xceed forum (and I’ll soon add to that) and the Xceed team seem to provide incomplete solutions… they really need to put a simple demo together, it’d take them 30min…
If you embed the triggers inside a datatemplate (i.e. use DataTemplate.Triggers) and then assign that datatemplate to a column you can make sure that its only the column you want that has the color changes.
OMG! This technique seems to work. Thank you so much!
After several weeks of WTF?!?! I can finally control the background color of a cell based upon dynamic criteria supplied by the user at runtime. (!!!)
I can appreciate the clean division between UI and business logic, but WPF seems to take this to a ridiculous extreme.
Thank you again!
Nevermind. The DataGrid recycles the view cells and everything gets unsynchronized whenever you scroll, group, or look at it sideways. I give up on WPF and MS.