HOWTO: Using WPF Converters to style the XamDataGrid

There have been a lot of forums posts and questions about how to use Converters and how to bind them to the a cell, multiple cells, or something else.

I have tried to summarize all of these requirements in one place and would be happy to update the sample project on your feedback.

How WPF Value Converters work : they are classes (that implement IValueConverter or IMultiValueConverter interfaces) that provide the ability (custom logic) to convert value(s) of one type to another and vice versa. They can also be used to convert values of the same type, but that is not really what they are meant to do. One really common case is to convert an integer value (for example the Age of a Person) to a Brush or a Color.

The screenshot below covers couple of scenarios:

1. Record Background formatting based on a cell's value ( blue for male, red for female)

2. Cell Background formatting based on the cell's value (Probation field)

3. Advanced Cell formatting based on the cell's value (Age field)

4. Formatting based on multiple cells' values (Salary field)

For example :

 

public class AgeToBrushConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            if (value == null)

                return Binding.DoNothing;

           if (value is int)

            {

                int temp = (int)value;

                if (temp < 0)

                    return Brushes.Red;

                if (temp > 0 && temp <= 10)

                    return Brushes.Black;

                if (temp > 10 && temp <= 15)

                    return Brushes.Blue;

                if (temp > 15)

                    return Brushes.DarkGreen;

            }

            return Binding.DoNothing;

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        { throw new NotImplementedException(); }

    }

 

 

You can find the full sample and source code with comments in the attachments of this blog post.


Attachment: DynamicStyling.zip

Comments  (12 )

ichig0
on Tue, Apr 13 2010 9:51 AM

hii... I'm trying to display a complete cell with different  color, like your example to the table Age and.. add a checkbox at the same cell. please help meeee :(

BRana
on Thu, Aug 12 2010 1:31 PM

I got many example in which I can compare value of Field on the basis of some known value.

Our requirement is ….We want to compare value with first record of Field and on that basis we want to change backcolor of cell (for the column).

e.g.

Employee Class

• ID

• Name

• Etc…

We have List<Employee> binded to XamDataGrid.

Now..I Added two fields in XAmDataGrid.

1. Field – ID ..For all records ..If ID[0] ( ID element of Record[0] of List<Emplyee> ) then we want to change cell color of other ID fields

2. Field – Name

e.g. Record[0].ID=1

Record[1].ID=2

Record[2].ID=1

Record[3].ID=4

Record[4].ID=1

So..>Here ...Record[2].ID=1 and Record[4].ID=1 's Backcolor willbe Blue as there value is Equal to Record[0].ID=1

If you have any idea plz revert back.

Andy
on Wed, Oct 20 2010 9:46 AM

First of all this solution throws binding exception to the output.

Secondly creating brushes from code behind is not great. It's better to use StyleSelectors here.

But StyleSelectors do not work properly with xamDataGrid cos it doen't pick up changes in the undelying data model.

[Infragistics] Ivo Evtimov
on Fri, Dec 3 2010 7:14 AM

Hi Andy, these exceptions are there because on init there is no DataItem.Age or DataItem.Gender. However these are not preventing the sample to run correctly. If these bother you you can always create the brushes in the convertor and bind it like this

<igDP:Field Name="Age" >

<igDP:Field.Settings>

 <igDP:FieldSettings CellWidth="50" LabelWidth="50">

  <igDP:FieldSettings.CellValuePresenterStyle>

  </igDP:FieldSettings.CellValuePresenterStyle>

 </igDP:FieldSettings>

</igDP:Field.Settings>

</igDP:Field>

[Infragistics] Ivo Evtimov
on Fri, Dec 3 2010 7:24 AM

hmm some code is missing in my previous post, let's try again :)

<igDP:Field Name="Age" >

<igDP:Field.Settings>

 <igDP:FieldSettings CellWidth="50" LabelWidth="50">

  <igDP:FieldSettings.CellValuePresenterStyle>

  </igDP:FieldSettings.CellValuePresenterStyle>

 </igDP:FieldSettings>

</igDP:Field.Settings>

</igDP:Field>

yazid
on Fri, Feb 18 2011 6:06 PM

I am binding to a dataTable because the columns vary. I want to change a cellColor if the value has changed. I have tried it with CellChanged in the code behind and does not seem to give me what I want. In the cellChanged I can have access to the current value and the previous value. What I want is to have access to the Original Value and Current Value. Is that possible?

Thx

Yaz

howardabraham
on Fri, Mar 30 2012 11:28 AM

How would this need to change to use an IMultiValueConverter with the DataRecordPresenter to change the record color based on the value of multiple DataItems?

howardabraham
on Fri, Mar 30 2012 2:50 PM

Never mind... figured it out

howardabraham
on Fri, Mar 30 2012 2:51 PM

Never mind.  I figured it out.

Adit Sheth
on Mon, Feb 4 2013 5:17 AM

Hi, This is working fine but it is not working in the case when i set theme = "Metro" .

Any idea about that?

Adit Sheth
on Mon, Feb 4 2013 6:42 AM

Hi All,

After some time i got my answer,

just you need to change style of DataRecordCellAreaStyle in metro theme

<igDP:FieldLayoutSettings.DataRecordCellAreaStyle>

</igDP:FieldLayoutSettings.DataRecordCellAreaStyle>

Add this style in FieldLayoutSettings and its work........

Thanks

lucklyhoi@hotmail.com
on Mon, Nov 25 2013 9:01 PM

can I disable alternative row to use this function too?

Add a Comment

Please Login or Register to add a comment.