BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Brushes - Linear Gradient

The one hundred and thirty-sixth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF brushes. This article looks at the first of two gradient brushes.

Colour Interpolation Modes

Gradient brushes support two colour spaces. These are distributions of colour, usually designed for different devices. In the case of WPF, the sRGB and scRGB colour spaces are available. A description of the colour spaces is beyond the scope of this article.

To select the colour space, set the ColorInterpolationMode property to a value from the ColorInterpolationMode enumeration. The default option is sRGB but this can be explicitly stated using the SRgbLinearInterpolation value. For scRGB, use ScRgbLinearInterpolation.

To show the difference between the modes, replace the XAML of the fourth ellipse with the code below. This uses a brush that is identical to that of the ellipse directly above, except for the use of scRGB instead of sRGB.

<Ellipse Stroke="Black" StrokeThickness="5">
    <Ellipse.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"
                             ColorInterpolationMode="ScRgbLinearInterpolation">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Cyan" Offset="0.2"/>
                <GradientStop Color="LightBlue" Offset="0.4"/>
                <GradientStop Color="White" Offset="0.5"/>
                <GradientStop Color="White" Offset="0.6"/>
                <GradientStop Color="DarkGray" Offset="0.6"/>
                <GradientStop Color="Black" Offset="0.8"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

You should be able to see a slight difference in the gradients between the two ellipses, particularly between the white and black colours at the bottom of the shapes.

WPF LinearGradientBrush with scRGB colour interpolation

Spread Methods

In the third ellipse we set a gradient using co-ordinates that were within the area of the shape. This caused the use of solid colours before and after the gradient, with the shades matching the first and last gradient stops.

You can change the colours used outside of the gradient's area by setting the spread method, with the SpreadMethod property. You can use one of three options, defined in the GradientSpreadMethod enumeration. The default is Pad, which fills the areas with solid colours.

If you change the spread method to Repeat, the gradient repeats to fill the entire shape. Often this means many repetitions of the same gradient stops and fades. If you set the property to Reflect, the gradient is repeated but each subsequent set of stops is reversed.

To demonstrate, replace the XAML for the final two ellipses with the following code. The updated shapes are filled with the same gradient brush as the third ellipse but with the two new spread methods.

<Ellipse Stroke="Black" StrokeThickness="5">
    <Ellipse.Fill>
        <LinearGradientBrush MappingMode="Absolute" SpreadMethod="Repeat"
                             StartPoint="50,50" EndPoint="70,70">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Yellow" Offset="0.1"/>
                <GradientStop Color="Orange" Offset="0.5"/>
                <GradientStop Color="Red" Offset="0.9"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

<Ellipse Stroke="Black" StrokeThickness="5">
    <Ellipse.Fill>
        <LinearGradientBrush MappingMode="Absolute" SpreadMethod="Reflect"
                             StartPoint="50,50" EndPoint="70,70">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="Yellow" Offset="0.1"/>
                <GradientStop Color="Orange" Offset="0.5"/>
                <GradientStop Color="Red" Offset="0.9"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

The results are shown below:

WPF LinearGradientBrush with alternative spread methods

16 February 2015