Gradient brushes in Silverlight

Before going any further look at this for an explanation of brushes, including gradients:

http://msdn.microsoft.com/en-us/library/cc189003%28VS.95%29.aspx

It’s useful to visualise what’s going on with gradient brushes so here is an example application with 3 pages each showing a rectangle with either a linear gradient fill or a radial gradient fill. There are 2 examples of linear gradients and one of a radial gradient. Of the linear gradient examples one has 2 gradient stops and the other 3.

Move the sliders to see the effect of different parameters on a gradient.

The following XAML snippets show rectangles from the 3 examples so you can see how the binding is working.

Radial gradient

```<Rectangle x:Name="rectFilled" Width="200" Height="100" Margin="0,5" HorizontalAlignment="Left">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="{Binding GradientOrigin}" Center="{Binding Center}" RadiusX="{Binding RadiusX}" RadiusY="{Binding RadiusY}">
<GradientStop x:Name="yellowGradientStop" Color="Yellow" Offset="{Binding YellowOffset}" />
<GradientStop x:Name="redGradientStop" Color="Red" Offset="{Binding RedOffset}" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>```

Linear gradient with 2 gradient stops

```<Rectangle x:Name="rectFilled" Width="200" Height="100" Margin="0,5" HorizontalAlignment="Left">
<Rectangle.Fill>
<LinearGradientBrush x:Name="lgbGradient" StartPoint="{Binding StartPoint}" EndPoint="{Binding EndPoint}">
<GradientStop x:Name="yellowGradientStop" Color="Yellow" Offset="{Binding YellowOffset}" />
<GradientStop x:Name="redGradientStop" Color="Red" Offset="{Binding RedOffset}" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>```

Linear gradient with 3 gradient stops

```<Rectangle x:Name="rectFilled" Width="200" Height="100" Margin="0,5" HorizontalAlignment="Left">
<Rectangle.Fill>
<LinearGradientBrush x:Name="lgbGradient" StartPoint="{Binding StartPoint}" EndPoint="{Binding EndPoint}">
<GradientStop x:Name="yellowGradientStop" Color="Yellow" Offset="{Binding YellowOffset}" />
<GradientStop x:Name="blueGradientStop" Color="Blue" Offset="{Binding BlueOffset}" />
<GradientStop x:Name="redGradientStop" Color="Red" Offset="{Binding RedOffset}" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>```

Post a Comment

By all means leave a comment. I may not be able to get back to you as quickly as I'd like but I'll do my very best.