Monday, September 27, 2010

Changing Background Color Of DataGrid Cell WPF 4

In this short post I will show you how to change the background color of the column of the data grid control depending on the binding value.Let us start with the code what code or technique you need to change the background color of the column of the data grid control.The output of the example code can be see in Image 1. Here you can see that I have set background of the column to green and red which has values 80 and 90 respectively. Now I will explain you the code which is used to set the background of the column.

Image 1
In the List 1 you can see the xaml code which is used to set the background color of the column of the data grid control, depending on the value of the binding property.Here you can see that I have used the DataGridTemplateColumn and set the header and the sortMemberPath ( used to sort the column, if not given you can't sort the DataGridTemplateColumn). And then I have used the CellTemplate to define the DataTemplate of the column. As I have only one property to be bind in this column so I have place border control and then inside the border control I have place the text block control and bind the text property of the text block control.

 <DataGridTemplateColumn Header="Total Sale in %" SortMemberPath="Sales"> <DataGridTemplateColumn.CellTemplate> <DataTemplate > <Border x:Name="brdBroder" VerticalAlignment="Stretch" Margin="1"> <TextBlock Text="{Binding Sales}" Margin="3,1" x:Name="txtTextBlock"/> </Border> <DataTemplate.Triggers> <DataTrigger Binding="{Binding Sales}" Value="80"> <Setter TargetName="brdBroder" Property="Background" Value="Green"/> <Setter TargetName="txtTextBlock" Property="Foreground" Value="White"/> </DataTrigger> <DataTrigger Binding="{Binding Sales}" Value="90"> <Setter TargetName="brdBroder" Property="Background" Value="Red"/> <Setter TargetName="txtTextBlock" Property="Foreground" Value="White"/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn>
List 1

Next is to define the trigger which are used to change the background color of the border which is placed in the Data Template. Here I have used the DataTrigger, which will used to check the value of 80 and 90 and set the background color of the border control to the green and red respectively as you can see in the Image 1 which is shown at the start of the post.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!


syed kalim said...

Hi Asim,
I am a regular visitor of ur blog
can u please post a MVVM example by using database and wpf.
Thanks in advance.

Asim Sajjad said...

@Kalim: ok I will do this as soon as possible thanks that you are regular reader of my blog.

Anonymous said...

Good Work. Thanks for working example

Ola said...

Hello Asim,
Thank you very much for the nice Topic.
I am doing a similar thing to what u're posting here.
It's just that I'm using telerik controls with wpf. So there must be some differences as i was not able to apply your code in my project.

Also I want to check if the cell value is greater than 5 i would change the cell background color into green for 2 seconds then switch back to it's original background color (flashing effect).

So is that possible??
Thank you very much for your help