XAML - Brushes - Gradient Brushes Part 2

The RadialGradientBrush is the second type of gradient brush, the first type, LinearGradientBrush was discussed in a previous post. This brush starts with one colour at a specified postion and then changes in a circular motion to another color at a different position. There can be multiple points and colors defined.
This first example shows a three colour gradient, yellow to orange to red, starting from the default Gradient Origin located in the center of the rectangle


Code

<Rectangle Width="100" Height="60">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Offset="1" Color="Red"/>
<GradientStop Offset="0.5" Color="Orange"/>
<GradientStop Offset="0" Color="Yellow"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>


Screenshot



To change the starting location of the gradient, you can set the GradientOrigin property on the RadialGradientBrush tag. The example below shows the effect of setting the origin to the 0,0 position, which is the top left corner.


Code

<Rectangle Width="100" Height="60">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0,0">
<GradientStop Offset="1" Color="Red"/>
<GradientStop Offset="0.5" Color="Orange"/>
<GradientStop Offset="0" Color="Yellow"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>


Screenshot



Another property than can be set on the brush is the Opacity, which sets how transparent the brush colour is. A value of 0 means that it is completly transparent and 1 being completly solid. The value can be a decimal number between the two values.
Here is an example to show how this in action.


Code

<TextBlock FontSize="50">Sample</TextBlock>
<Rectangle Width="100" Height="60">
<Rectangle.Fill>
<RadialGradientBrush Opacity="0.8" GradientOrigin="0,0">
<GradientStop Offset="1" Color="Red"/>
<GradientStop Offset="0.5" Color="Orange"/>
<GradientStop Offset="0" Color="Yellow"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>


Screenshot