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!