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.

Adding More Gradient Stops

You can use as many gradient stops as you need to achieve the desired effect. Each gradient stop adds an extra transition. If two adjacent stops have the same colour, the area between will be a solid shade.

Change the XAML for the second ellipse as follows. This creates a vertical gradient with six colours.

<Ellipse Stroke="Black" StrokeThickness="5">
    <Ellipse.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <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>

The result has a number of transitions, as well as a solid white area between the third and fourth gradient stops. Note also that there is no gradient stop at an offset of either zero or one. The areas between zero and 0.2 therefore use the first colour and the areas between 0.8 and 1 use the final stop's colour.

WPF LinearGradientBrush with many gradient stops

Mapping Modes

Gradient brushes have two available mapping modes. These modes determine how the co-ordinates of the start and end points are mapped to the shape. As we've seen, by default the co-ordinate system has a range of (0,0) to (1,1), these being the locations of the top-left and bottom-right corners. This mode is known as relative to bounding box.

One problem with the default mapping mode is that the angle of the gradient varies according to the aspect ratio of the bounding box. If you apply the same linear gradient to multiple objects of differing sizes, it can appear that the colours do not match. In these situations you might prefer to use the absolute mapping mode.

With absolute mapping, the start and end points are set using device-independent units. With this mode, the angle of the gradient will match over multiple shapes. However, it is possible that the gradient co-ordinates will not match the size of the shape.

To set the mapping mode for a fill, change the MappingMode property. You can use the values RelativeToBoundingBox or Absolute, which are defined in the BrushMappingMode enumeration.

To demonstrate, replace the XAML for the third ellipse with the following code:

<Ellipse Stroke="Black" StrokeThickness="5">
    <Ellipse.Fill>
        <LinearGradientBrush MappingMode="Absolute"
                             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. Note that the gradient's imaginary line starts and ends well within the area of the ellipse. The area that appears before the start of the gradient matches the colour of the first gradient stop. The area after the end point uses the colour of the final end point. As we'll see later, this behaviour can be changed.

WPF LinearGradientBrush with absolute mapping

16 February 2015