Problem with a polyline chart and LinearGradientBrush

Question

I have a graph with a polyline contained in a canvas. I would like to set the stroke of the polyline, starting with the color at the bottom and ending with another color at the top. I tried with this xaml:

<Polyline StrokeThickness="2"> <Polyline.Stroke> <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0"> <GradientStop Color="Blue" Offset="0" /> <GradientStop Color="Cyan" Offset="1" /> </LinearGradientBrush> </Polyline.Stroke> </Polyline> 

This way it works, but the height of the gradient is equal to the height of the polyline. I mean, if I have a polyline that goes from the bottom of the canvas to its top, the gradient is applied across the entire height of the canvas. If I instead have a horizontal polyline, the gradient applies to its thickness.
I would like to have a gradient height equal to the height of the canvas, regardless of the height of the polyline.
How can I achieve this?

Answer 1

The start and stop of the gradient are set by the StartPoint and EndPoint LinearGradientBrush properties. Your example shows the values ​​that are inside the PolyLine (0.5.1 and 0.5.0). You can have values ​​less than 0 or greater than 1 to start the gradient before the shape or the end after it.

But using relative values ​​can be difficult for what you want. Relative values ​​are used because the MappingMode property of LinearGradientBrush is not explicitly set. The default value is RelativeToBoundingBox , but can be set to Absolute .

This way you can set StartPoint to (0,0) and EndPoint in the width and height of the canvas to get the result you are looking for.