Using LinearGradientBrush background to mimic a bar chart

[Infragistics] Ivo Evtimov / Wednesday, December 8, 2010

This blog post was inspired by one from Alex Fidanov and uses its code.

Looking at his sample I wondered if I can tweak the Age field some more so that the gradient used as a background to be more informative – to display an accurate graphic representation of the value. So I began playing with a LinearGradientBrush – I was looking for a way to display 2 colored LinearGradientBrush without the gradient part.

The logical thing to do was to arrange the Gradient Stops close enough to one another so no gradient is visible in that tiny space. Here is an example:

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

Next I implemented this idea in an IValueConvertor (see the attached file), set the convertor in the xamGrid like

<igDP:Field Name="Age">

<igDP:Field.Settings>

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

<igDP:FieldSettings.CellValuePresenterStyle>

<Setter Property="Background"

Value="{Binding Path=DataItem, Converter={StaticResource ageToGradientStopConverter}}">

</Setter>

</Style>

</igDP:FieldSettings.CellValuePresenterStyle>

</igDP:FieldSettings>

</igDP:Field.Settings>

</igDP:Field>

And it worked like a charm!

Note that resizing the column and sorting are not an issue

Note: The screenshots are from another sample using this convertor

The beauty of this solution is that it can be used in all kinds of controls and situations. It is applicable to both Silverlight and WPF so happy coding!

AgeToGradientStopConverter.cs.txt