Using LinearGradientBrush background to mimic a bar chart

[Infragistics] Ivo Evtimov / Wednesday, December 08, 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:

  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="Green" Offset="0.7" ></GradientStop>
    <GradientStop Color="Transparent" Offset="0.701"></GradientStop>                           

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

<igDP:Field Name="Age">
      <igDP:FieldSettings CellWidth="50" LabelWidth="50" >
            <Style TargetType="{x:Type igDP:CellValuePresenter}">
               <Setter Property="Background"
                       Value="{Binding Path=DataItem, Converter={StaticResource ageToGradientStopConverter}}">

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!