Using RadialGradientBrush in Silverlight

Adding a RadialGradientBrush


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

To apply a RadialGradientBrush to a Silverlight control, you need to define the Radial- GradientBrush element. You can define the center of the gradient radius using the GradientOrigin property. The GradientOrigin is set on a 0 to 1 coordinate system separated by a comma.

You can also define the radius of the gradient in the X and Y planes using the RadiusX and RadiusY properties. These properties are set on a scale where 1 is the Height or Width of the Silverlight control.

Then you also need to define two or more GradientStop elements inside the Radial- GradientBrush. 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 on a radius centered at the GradientOrigin and defined by the RadiusX and RadiusY properties matching the colors at each GradientStop along the way.

Eg:

< Rectangle Height="200" Width="200" >


< Rectangle.Fill >


< RadialGradientBrush >


< GradientStop Color="Blue" />


< GradientStop Color="White" Offset=".5" / >


< GradientStop Color="Blue" Offset=".9"/ >


< /RadialGradientBrush >


< /Rectangle.Fill >


< /Rectangle >



Eg:

< Rectangle Height="200" Width="200" >


< Rectangle.Fill >


< RadialGradientBrush GradientOrigin="0,0" >


< GradientStop Color="Blue"/ >


< GradientStop Color="White" Offset=".5"/ >


< GradientStop Color="Blue" Offset=".9"/ >


< /RadialGradientBrush >


< /Rectangle.Fill >


< /Rectangle >



Eg:

< Rectangle Height="200" Width="200" >


< Rectangle.Fill >


< RadialGradientBrush GradientOrigin=".5,.5" RadiusX=".6" RadiusY=".2" >


< GradientStop Color="Blue"/ >


< GradientStop Color="White" Offset=".5"/ >


< GradientStop Color="Blue" Offset=".9"/ >


< /RadialGradientBrush >


< /Rectangle.Fill >


< /Rectangle >