Monday, 14 June 2010

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.

Get Microsoft Silverlight

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>