How to bind GradientStop Colours or GradientStops Property in Silverlight?

Question

I want to be able to have a dynamic Gradient in Silverlight, such as below:

Answer 1

To really make this happen you have two choices.

Bind the display items Brush property to a Brush property in the data

Have the data source carry a property which exposes which brush you want to use on for each item and you bind the property of the display item that takes the brush, say a Fill property. This works if the set of distinct values you would have for pairs of Start and Stop values is small. You'd create an instance of each brush for each pair and then data item would expose the correct one.

Bind the display items Brush property using a Value Converter

If your Start and Stop values a more variable you will need a new instance of a Brush type for each displayed item. In this case you would bind the display items brush property using a Value converter, for example :-

See this answer for a complete description of building a Converter.

In this case though your convert method implementation would look like this:-

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
  YourItemsType item = (YourItemsType)value;

  var start = new GradientStop();
  start.Offset = 0;
  start.Color = item.GradientStart;

  var stop = new GradientStop();
  stop.Offset = 1;
  stop.Color = item.GradientStop;

  var result = new RadialGradientBrush();
  result.GradientOrigin = new Point(0.20, 0.5);
  result.Center = new Point(0.25, 0.5);
  result.RadiusX = 0.75;
  result.RadiusY = 0.5;
  result.GradientStops = new GradientStopCollection();
  result.GradientStops.Add(start);
  result.GradientStops.Add(stop);

  return result;
}

Caveat

Whenever data binding occurs a whole bunch of brushes are created one for each item. This may be expensive and undesirable. Hence if this binding converter approach is deemed necessary then I would recommend you use static dictionary of brushes. The key into this dictionary would be the hash of the two colors. You would only create a new brush when necessary and reuse a previously created brush when possible.