Using a LinearGradientBrush in Silverlight

Using a LinearGradientBrush


LinearGradientBrush elements are similar to the SolidColorBrush. They define a linear gradient that flows between two or more colors. You can apply them to the properties of Silverlight controls the same way that the SolidColorBrush is applied.

To apply a LinearGradientBrush to a Silverlight control, you need to define the Linear- GradientBrush element and give it an EndPoint and a StartPoint that define the linear direction of the brush. The EndPoint and StartPoint are set on a 0 to 1 coordinate system separated by a comma.

Then you need to define two or more GradientStop elements inside the LinearGradient- Brush. Each GradientStop element needs the Color property set. You can also define the offset between 0 and 1 where that color is set using the Offset property. Silverlight applies the gradient linearly along the path defined by the StartPoint and EndPoint values matching the colors at each GradientStop along the way.

Eg:

< Rectangle Width="200" Height="200" Stroke="Black" >
< Rectangle.Fill >
< LinearGradientBrush StartPoint="0.0 0.0" EndPoint="0 1" >
< GradientStop Color="Red" Offset=""/ >
< GradientStop Color="Green" Offset="0.33"/ >
< GradientStop Color="Blue" Offset="0.67"/ >
< /LinearGradientBrush >
< /Rectangle.Fill >
< /Rectangle >

Eg:

< TextBlock Height="100"
TextAlignment="Center"
FontSize="30" >
< Run Text="Linear Gradient brush" >
< Run.Foreground >
< LinearGradientBrush >
< GradientStop Color="Blue" Offset=".3"/ >
< GradientStop Color="Red" Offset=".5"/ >
< GradientStop Color="Green" Offset=".8"/ >
< /LinearGradientBrush >
< /Run.Foreground >
< / Run >
< /TextBlock >