Question

I am currently trying to draw a polygon and then fill it with a gradient. The problem is the gradient uses the top of the shape as up so it slants. Here is some xaml that will create what I am talking about.

   <Polygon Points="0,20 0,20 100,0 100,20">
        <Polygon.Fill>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,1">
                <GradientStop Color="White" Offset="0" />
                <GradientStop Color="White" Offset="0.5" />
                <GradientStop Color="Black" Offset="0.5" />
            </LinearGradientBrush>
        </Polygon.Fill>
    </Polygon>

This code is a good example because it will split the colors at the 50% mark with white on the left and black on the right. You can see that the cutoff line is slanted with the top of the triangle. Here is a picture too in case you cant try the code.

Is there a way to make it so that it is a vertical cutoff and not slanted?

Answer 1

You will need to change the start and end points:

<... StartPoint="0,0.5" EndPoint="1,0.5" >

The above translates to “start at mid left, end mid right”.

Right now your points are saying “start at the top right and end at the bottom left”.

Therefore, we probably ought to swap it around, like so:

<... StartPoint="1,0.5" EndPoint="0,0.5" >

For reference, and even further examples demonstrating your requirements, check here.