Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I change the background color of a cell using WPF Toolkit Datagrid

Tags:

I'm using the WPF toolkit datagrid, and I'd like to set the background color of a cell, not the row, based on the content of the cell.

For the sake of simplicity, lets say the column is called Foo and I'd like the background of the cell to be blue when Foo is 1, red when Foo is 2, Yellow when Foo is 3 and Green when Foo is greater than 3.

If I can do that, I'm pretty sure I can solve any of the more complex cases that I need to deal with.

like image 753
Jonathan Beerhalter Avatar asked Nov 16 '09 22:11

Jonathan Beerhalter


People also ask

How to change cell color in DataGrid wpf?

WPF DataGrid (SfDataGrid) does not provide direct support to change the background color of cell when editing. You can change the background color of the cell when editing in SfDataGrid by customized the editor control TextChanged event based on the corresponding column renderer.

How do I change the background color in WPF?

Navigate to the Properties window, and click the Background drop-down arrow, and choose Red or another color in the color picker.

Can user add rows DataGrid WPF?

WPF DataGrid (SfDataGrid) provides built-in row called AddNewRow. It allows user to add a new row to underlying collection. You can enable or disable by setting SfDataGrid.


1 Answers

You do this with Styles and DataTriggers. Just set your ElementStyle with your default background property, in this case Green, and add DataTriggers for the other cases:

<DataGridTextColumn Binding="{Binding WhateverIWantToDisplay}" >   <DataGridTextColumn.ElementStyle>     <Style TargetType="{x:Type TextBlock}">        <Setter Property="Background" Value="Green" />        <Style.Triggers>         <DataTrigger Binding="{Binding Foo}" Value="1">           <Setter Property="Background" Value="Blue" />         </DataTrigger>          <DataTrigger Binding="{Binding Foo}" Value="2">           <Setter Property="Background" Value="Red" />         </DataTrigger>          <DataTrigger Binding="{Binding Foo}" Value="2">           <Setter Property="Background" Value="Yellow" />         </DataTrigger>        </Style.Triggers>     </Style>   </DataGridTextColumn.ElementStyle> </DataGridTextColumn> 

Another approach is to use a binding with a converter:

<DataGridTextColumn Binding="{Binding WhateverIWantToDisplay}" >   <DataGridTextColumn.ElementStyle>     <Style TargetType="{x:Type TextBlock}">        <Setter Property="Background"         Value="{Binding Foo, Converter={x:Static my:FooToColorConverter.Instance}}" />      </Style>   </DataGridTextColumn.ElementStyle> </DataGridTextColumn> 

with this converter:

public class FooToColorConverter : IValueConverter {   public static readonly IValueConverter Instance = new FooToColorConverter();   public object Convert(object value, ...   {     int foo = (int)value;     return       foo==1 ? Brushes.Blue :       foo==2 ? Brushes.Red :       foo==3 ? Brushes.Yellow :       foo>3 ? Brushes.Green :         Brushes.Transparent;  // For foo<1   }   public object ConvertBack(...   {     throw new NotImplementedException();   } } 

Note that answer serge_gubenko gave will work as well, but only if your Foo property value never changes. This is because the Color property getter will only be called once. His solution can be improved by changing Color to a read-only DependencyProperty and updating it whenever Foo is assigned, but it is generally a bad idea to have UI-specific information like colors in your data model, so it is not recommended.

like image 63
Ray Burns Avatar answered Oct 01 '22 01:10

Ray Burns