#213 – Changing the Gradient Line in a Linear Gradient Brush

By default, the gradient line in a linear gradient brush starts in the upper left corner of a control and extends to the lower right corner.  You can change the gradient line by specifying values for the StartPoint and EndPoint properties.

Each of these properties specifies a two-dimensional point (X,Y) indicating where the gradient line starts or ends.  The default StartPoint is (0,0) and the default EndPoint is (1,1).

For a gradient where we don’t specify start and end points and have two gradient stops:

                <LinearGradientBrush>
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>

We get the following gradient.  The gradient line is drawn, for reference.

A top-to-bottom gradient would look like this:

                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>

And left to right:

                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0.0"/>
                    <GradientStop Color="Blue" Offset="1.0"/>
                </LinearGradientBrush>