Sunday, October 3, 2010

Changing Background Color Of DataGrid Row WPF 4

In this post I will show you the way you can change the background color of the data grid row depending on the binding value. Let us start with the code of how to highlight or change the background color of the data grid row.

First Way : 
  In the first way we will change the background color of the data grid row using the data trigger in the data row style of the data grid. You can see the xaml of the trigger which I have used in the DataGridRow style. Here you can see that I have two datatrigger one for the value for 90 and the second one is for the value 80.

        <Style.Triggers> <DataTrigger Binding="{Binding Sales}" Value="90"> <Setter Property="Background" Value="{StaticResource RedBackgroundBrush}"/> </DataTrigger> <DataTrigger Binding="{Binding Sales}" Value="80"> <Setter Property="Background" Value="{StaticResource GreenBackgroundBrush}"/> </DataTrigger> </Style.Triggers>
List 1

You can see the xaml in the List 1 where I have changed the background of the DataGridRow. In the xaml I have set the RedBackgroundBrush and the GreenBackgroundBrush which I have define in the resource to be used for the background of the datagrid row. And the output of the List 1 can be seen in the Image 1 as below. Here you can see that value of the sales of 90 are background of red and the value of the sales of 80 are background of 80.
Image 1
Second Way :
Second way to change the background color of the data grid row background is by using the LoadingRow event handler.Which Occurs after a DataGridRow is instantiated, so that you can customize it before it is used. So here I have used the code you can see in the List 2 to customize or change the background color of the datagrid row.

        private void DataGrid_LoadingRow(object sender, System.Windows.Controls.DataGridRowEventArgs e) { Persons RowDataContaxt = e.Row.DataContext as Persons; if (RowDataContaxt != null) { if (RowDataContaxt.Sales == 50) e.Row.Background = FindResource("RedBackgroundBrush") as Brush; else if (RowDataContaxt.Sales == 60) e.Row.Background = FindResource("GreenBackgroundBrush") as Brush; } }
List 2

In the List 2 you can see that I have used the condition of 50 and 60 to change the color of the datagrid row background to be changed red for the 50 and green for the 60 and then by using the FindResource to find the red and the green background brush which I have defined in the resource dictionary. The output of the List 2 can be seen in the Image 2 which is just below.
Image 2
Hope you get some idea of how to change the background of the DataGrid row at run time depending on the binding value.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!


5 comments:

Patrik said...

Hi,

thanks for this post.

if you have some more Rows you will have randomly colored Rows. You have to define a default color in an else statement to avoid this. Look here:

http://stackoverflow.com/questions/1509714/c-silverlight-datagrid-row-color-change

ErnstK said...

the sample works fine as long as the items in the datagrid are not many.
copying the person list and pasting the persons 3 times makes it obvious:
when you scroll down it works fine. when you scroll back up the colors dont fit any longer.

As it is, it is just a solution for short lists.

Anonymous said...

The sample code will also work with large lists, if you add the event handler DataGrid_UnloadingRow. Therein you have to call
e.Row.Background = null;
and everything will work fine.

Anonymous said...

Thank you. I have found this post very useful.

Anonymous said...

Thank you for this. I searched for hours trying to do this with normal triggers. I had no clue that datatriggers even existed. Thanks!