#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:

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

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"/>

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"/>


About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #213 – Changing the Gradient Line in a Linear Gradient Brush

  1. Pingback: #548 – Change the Offset of a Gradient Stop in Blend « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: