Change DataGrid cell colour based on values

Question

I have got a WPF datagrid and I want diffrent cell colours according to values  I have got below code on my xaml  Style TargetType  DataGridCell    but instead of selecting a cell only is selecting all row  What am I missing

User · Answer

To do this in the Code Behind  VB NET   Dim txtCol As New DataGridTextColumn  Dim style As New Style GetType TextBlock   Dim tri As New Trigger With   Property   TextBlock TextProperty   Value    John   tri Setters Add New Setter With   Property   TextBlock BackgroundProperty   Value   Brushes Green   style Triggers Add tri   xtCol ElementStyle   style

User · Answer

In my case convertor must return string value  I don t why  but it works     xaml  common style file  which is included in another xaml files    lt Style TargetType  DataGridCell  gt           lt Setter Property  Background  Value   Binding RelativeSource  RelativeSource Self   Converter  StaticResource ValueToBrushConverter      gt   lt  Style gt      cs  public object Convert object value  Type targetType  object parameter  CultureInfo culture        Color color   VSColorTheme GetThemedColor EnvironmentColors ToolWindowBackgroundColorKey       return       color Name

User · Answer

If you try to set the DataGrid CellStyle the DataContext will be the row  so if you want to change the colour based on one cell it might be easiest to do so in specific columns  especially since columns can have varying contents  like TextBlocks  ComboBoxes and CheckBoxes  Here is an example of setting all the cells light-green where the Name is John   lt DataGridTextColumn Binding  quot  Binding Name  quot  gt       lt DataGridTextColumn ElementStyle gt           lt Style TargetType  quot  x Type TextBlock  quot  gt               lt Style Triggers gt                   lt Trigger Property  quot Text quot  Value  quot John quot  gt                       lt Setter Property  quot Background quot  Value  quot LightGreen quot   gt                   lt  Trigger gt               lt  Style Triggers gt           lt  Style gt       lt  DataGridTextColumn ElementStyle gt   lt  DataGridTextColumn gt     You could also use a ValueConverter to change the colour  public class NameToBrushConverter   IValueConverter       public object Convert object value  Type targetType  object parameter  System Globalization CultureInfo culture                string input   value as string          switch  input                        case  quot John quot                   return Brushes LightGreen              default                  return DependencyProperty UnsetValue                       public object ConvertBack object value  Type targetType  object parameter  System Globalization CultureInfo culture                throw new NotSupportedException             Usage   lt Window Resources gt       lt local NameToBrushConverter x Key  quot NameToBrushConverter quot   gt   lt  Window Resources gt       lt DataGridTextColumn Binding  quot  Binding Name  quot  gt       lt DataGridTextColumn ElementStyle gt           lt Style TargetType  quot  x Type TextBlock  quot  gt               lt Setter Property  quot Background quot  Value  quot  Binding Name  Converter  StaticResource NameToBrushConverter   quot   gt           lt  Style gt       lt  DataGridTextColumn ElementStyle gt   lt  DataGridTextColumn gt    Yet another option is to directly bind the Background to a property which returns the respectively coloured brush  You will have to fire property change notifications in the setters of properties on which the colour is dependent  e g  public string Name       get   return  name        set               if   name    value                         name   value              OnPropertyChanged nameof Name                OnPropertyChanged nameof NameBrush                       public Brush NameBrush       get               switch  Name                        case  quot John quot                   return Brushes LightGreen              default                  break                     return Brushes Transparent

User · Answer

This may be of help to you  It isn t the stock WPF datagrid however   I used DevExpress with a custom ColorFormatter behaviour  I couldn t find anything on the market that did this out of the box  This took me a few days to develop  My code attaached below  hopefully this helps someone out there   Edit  I used POCO view models and MVVM however you could change this to not use POCO if you desire     Viewmodel cs  namespace ViewModel        POCOViewModel      public class Table2DViewModel               public ITable2DView Table2DView   get  set             public DataTable ItemsTable   get  set              public Table2DViewModel                                public Table2DViewModel MainViewModel mainViewModel  ITable2DView table2DView    base mainViewModel                        Table2DView   table2DView                 CreateTable                       private void CreateTable                         var dt   new DataTable                var xAxisStrings   new string    X1   X2   X3                var yAxisStrings   new string    Y1   Y2   Y3                   TODO determine your min  max number for your colours             var minValue   0              var maxValue   100              Table2DView SetColorFormatter minValue maxValue  null                  Add the columns             dt Columns Add      typeof string                foreach  var x in xAxisStrings  dt Columns Add x  typeof double                   Add all the values             double z   0              for  var y   0  y  lt  yAxisStrings Length  y                                  var dr   dt NewRow                    dr        yAxisStrings y                   for  var x   0  x  lt  xAxisStrings Length  x                                            TODO put your actual values here                      dr xAxisStrings x     z      Add a random values                                   dt Rows Add dr                             ItemsTable   dt                      public static Table2DViewModel Create MainViewModel mainViewModel  ITable2DView table2DView                        var factory   ViewModelSource Factory  MainViewModel mainVm  ITable2DView view    gt  new Table2DViewModel mainVm  view                return factory mainViewModel  table2DView                        IView cs  namespace Interfaces               public interface ITable2DView                       void SetColorFormatter float minValue  float maxValue  ColorScaleFormat colorScaleFormat                     View xaml cs  namespace View       public partial class Table2DView   ITable2DView               public Table2DView                         InitializeComponent                       static ColorScaleFormat defaultColorScaleFormat   new ColorScaleFormat                       ColorMin    Color ColorConverter ConvertFromString   FFF8696B                ColorMiddle    Color ColorConverter ConvertFromString   FFFFEB84                ColorMax    Color ColorConverter ConvertFromString   FF63BE7B                       public void SetColorFormatter float minValue  float maxValue  ColorScaleFormat colorScaleFormat   null                        if  colorScaleFormat    null  colorScaleFormat   defaultColorScaleFormat              ConditionBehavior MinValue   minValue              ConditionBehavior MaxValue   maxValue              ConditionBehavior ColorScaleFormat   colorScaleFormat                      DynamicConditionBehavior cs  namespace Behaviors       public class DynamicConditionBehavior   Behavior lt GridControl gt                GridControl Grid   gt  AssociatedObject           protected override void OnAttached                         base OnAttached                Grid ItemsSourceChanged    OnItemsSourceChanged                     protected override void OnDetaching                         Grid ItemsSourceChanged -  OnItemsSourceChanged              base OnDetaching                       public ColorScaleFormat ColorScaleFormat   get  set           public float MinValue   get  set            public float MaxValue   get  set             private void OnItemsSourceChanged object sender  EventArgs e                        var view   Grid View as TableView               if  view    null  return               view FormatConditions Clear                 foreach  var col in Grid Columns                                view FormatConditions Add new ColorScaleFormatCondition                                       MinValue   MinValue                      MaxValue   MaxValue                      FieldName   col FieldName                      Format   ColorScaleFormat                                                         View xaml   lt UserControl x Class  View               xmlns  http   schemas microsoft com winfx 2006 xaml presentation               xmlns x  http   schemas microsoft com winfx 2006 xaml               xmlns mc  http   schemas openxmlformats org markup-compatibility 2006               xmlns d  http   schemas microsoft com expression blend 2008               xmlns dxmvvm  http   schemas devexpress com winfx 2008 xaml mvvm                xmlns ViewModels  clr-namespace ViewModel               xmlns dxg  http   schemas devexpress com winfx 2008 xaml grid               xmlns behaviors  clr-namespace Behaviors               xmlns dxdo  http   schemas devexpress com winfx 2008 xaml docking               DataContext   dxmvvm ViewModelSource Type  x Type ViewModels ViewModel                 mc Ignorable  d  d DesignHeight  300  d DesignWidth  800  gt        lt UserControl Resources gt           lt Style TargetType   x Type dxg GridColumn   gt               lt Setter Property  Width  Value  50   gt               lt Setter Property  HorizontalHeaderContentAlignment  Value  Center   gt           lt  Style gt            lt Style TargetType   x Type dxg HeaderItemsControl   gt               lt Setter Property  FontWeight  Value  DemiBold   gt           lt  Style gt       lt  UserControl Resources gt            lt  -- lt dxmvvm Interaction Behaviors gt               lt dxmvvm EventToCommand EventName    Command   Binding OnLoadedCommand    gt           lt  dxmvvm Interaction Behaviors gt -- gt           lt dxg GridControl ItemsSource   Binding ItemsTable                        AutoGenerateColumns  AddNew                       EnableSmartColumnsGeneration  True  gt            lt dxmvvm Interaction Behaviors  gt               lt behaviors DynamicConditionBehavior x Name  ConditionBehavior    gt               lt  dxmvvm Interaction Behaviors gt               lt dxg GridControl View gt                   lt dxg TableView ShowGroupPanel  False                             AllowPerPixelScrolling  True   gt               lt  dxg GridControl View gt           lt  dxg GridControl gt     lt  UserControl gt

User · Answer

Based on the answer by  Cassio Borghi   With this method  there is no need to change the XAML at all           DataGridTextColumn colNameStatus2   new DataGridTextColumn            colNameStatus2 Header    Status           colNameStatus2 MinWidth   100          colNameStatus2 Binding   new Binding  Status            grdComputer Servives Columns Add colNameStatus2            Style style   new Style typeof TextBlock            Trigger running   new Trigger     Property   TextBlock TextProperty  Value    Running             Trigger stopped   new Trigger     Property   TextBlock TextProperty  Value    Stopped              stopped Setters Add new Setter     Property   TextBlock BackgroundProperty  Value   Brushes Blue             running Setters Add new Setter     Property   TextBlock BackgroundProperty  Value   Brushes Green              style Triggers Add running           style Triggers Add stopped            colNameStatus2 ElementStyle   style           foreach  var Service in computerResult                        var RowName   Service                grdComputer Servives Items Add RowName

User · Answer

If you need to do it with a set number of columns  H B  s way is best  But if you don t know how many columns you are dealing with until runtime  then the below code  read  hack  will work  I am not sure if there is a better solution with an unknown number of columns  It took me two days working at it off and on to get it  so I m sticking with it regardless   C   public class ValueToBrushConverter   IValueConverter       public object Convert object value  Type targetType  object parameter  System Globalization CultureInfo culture                int input          try                       DataGridCell dgc    DataGridCell value              System Data DataRowView rowView    System Data DataRowView dgc DataContext              input    int rowView Row ItemArray dgc Column DisplayIndex                     catch  InvalidCastException e                        return DependencyProperty UnsetValue                    switch  input                        case 1  return Brushes Red              case 2  return Brushes White              case 3  return Brushes Blue              default  return DependencyProperty UnsetValue                       public object ConvertBack object value  Type targetType  object parameter  System Globalization CultureInfo culture                throw new NotSupportedException              XAML   lt UserControl Resources gt       lt conv ValueToBrushConverter x Key  ValueToBrushConverter   gt       lt Style x Key  CellStyle  TargetType  DataGridCell  gt           lt Setter Property  Background  Value   Binding RelativeSource  RelativeSource Self   Converter  StaticResource ValueToBrushConverter      gt       lt  Style gt   lt  UserControl Resources gt   lt DataGrid x Name  dataGrid  CellStyle   StaticResource CellStyle   gt   lt  DataGrid gt

User · Answer

Just put instead    lt Style TargetType   x DataGridCell    gt    But beware that this will target ALL your cells  you re aiming at all the objects of type DataGridCell   If you want to put a style according to the cell type  I d recommend you to use a DataTemplateSelector  A good example can be found in Christian Mosers  DataGrid tutorial   http   www wpftutorial net DataGrid html rowDetails  Have fun

User · Answer

Example  Adding a converter to a column  C           Style styleReading   new Style typeof TextBlock            Setter s   new Setter            s Property   TextBlock ForegroundProperty          Binding b   new Binding            b RelativeSource   RelativeSource Self          b Path   new PropertyPath TextBlock TextProperty           b Converter   new ReadingForegroundSetter            s Value   b          styleReading Setters Add s           col ElementStyle   styleReading

[c#] Change DataGrid cell colour based on values

Examples related to c#

Examples related to wpf

Examples related to xaml

Examples related to colors

Examples related to datagrid