.NET 4.0+

WPF Brushes - Radial Gradient

by Richard Carr, published at http://www.blackwasp.co.uk/RadialGradientBrush.aspx

The one hundred and thirty-seventh part of the Windows Presentation Foundation Fundamentals tutorial looks at a second style of gradient brush. The radial gradient brush allows smooth fades between colours according to the distance from a focal point.

Gradients

In the previous article we looked at the linear gradient brush. This allows you to fill areas of shapes and controls with a smooth fade between two or more colours. In the case of the linear gradient brush, the colour changes in a straight line, defined using two co-ordinate pairs. The colours are set at points along that line, known a gradient stops.

In this article we'll look at radial gradient brushes. These are similar to linear gradients and share the same base class. The main difference is the direction of the gradient. Rather than the colour changes being applied along a straight line, the colour varies according to the distance between a focal point and an ellipse's edge.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "RadialGradientDemo". Once prepared, change the XAML in the main window to match the code below:

<Window x:Class="RadialGradientDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Brush Demo" Height="150" Width="250">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Rectangle Margin="2" Stroke="Black" StrokeThickness="5" />
        <Rectangle Grid.Column="1" Margin="2" Stroke="Black" StrokeThickness="5" />
    </Grid>
</Window>

The window includes two Rectangles of matching size. We'll apply radial gradient fills to these rectangles in the remainder of the article.

Basic Radial Gradient

Both the focal point and the centre point of the outer ellipse are set using Point values. By default, as with linear gradients, the co-ordinate system spans between (0,0), which corresponds to the top-left corner of the bounding box of the item being filled, and (1,1), which is the bottom-right corner. The properties for the two points are set in GradientOrigin for the focal point and Center for the ellipse.

The outer ellipse's size is set using two radius values, RadiusX and RadiusY. The gradient stops are set in the GradientStops property, in exactly the same manner as with linear gradients. An offset of zero for a gradient stop means that the colour will be applied at the focal point. A value of one corresponds to the outer ellipse.

Let's add a radial gradient to the first Rectangle. Replace the XAML for the shape with the following:

<Rectangle Margin="2" Stroke="Black" StrokeThickness="5">
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
                             RadiusX="0.5" RadiusY="0.5">
            <RadialGradientBrush.GradientStops>
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Yellow" Offset="0.1"/>
                <GradientStop Color="Green" Offset="0.9"/>
                <GradientStop Color="Blue" Offset="1"/>
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

The result is shown below. Note that the first gradient stop, which is red and has an offset of zero, causes a red dot in the centre of the rectangle. The gradient ends at the edge of the ellipse. As the ellipse has a radius of 0.5, this coincides with the edges of the rectangle.

The focal point does not need to match the centre of the outer ellipse. When is does not, the gradient still spans from the focal point to the ellipse but the rate of change of colour varies depending upon the distance between the focal point and the ellipse's edge. The focal point can even be positioned outside of the ellipse.

Modify the second rectangle's code to create a gradient with an offset focal point.

<Rectangle Grid.Column="1" Margin="2" Stroke="Black" StrokeThickness="5">
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.2,0.2" Center="0.5,0.5"
                        RadiusX="0.5" RadiusY="0.5">
            <RadialGradientBrush.GradientStops>
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Yellow" Offset="0.1"/>
                <GradientStop Color="Green" Offset="0.9"/>
                <GradientStop Color="Blue" Offset="1"/>
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

The result is shown below. Again, the focal point is red.