SVG -> WPF linear gradient

Question

Does anyone know if there is an equilant attribute of SVG's "gradientUnits=userSpaceOnUse" in WPF for a LinearGradientBrush? I can't seem to find this.

If not, does anyone know about how to calculate it in (C# or VB.NET)? For example if I have a StartPoint of 0,0 and EndPoint of 1,1 on a Rectangle that is 100x100, the angle is 45 degrees. However, when I change either the width or height of the Rectangle, for example Width=150, the axis is no longer at 45 degrees. How could I calculate to keep the angle at 45 degrees in a rectangle that is not a square so that it runs from bottom left to top right corner for a middle gradientstop.

when you say changing the width or height, are you transforming the rectangle? If yes, are you using Transform or RelativeTransform then? — räph, Sep 01 '09 at 06:17
Sorry, I don't think I was clear. I'm not changing the W or H after the fact - I was using a square of 100x100 as an example of the desired result (angle at 45 degrees) for a different sized rectangles, for example 120x220. The desired result is that if there are three line gradients, the middle one would run from bottom left of the rect to top right, directly on that axis. — Todd Main, Sep 02 '09 at 00:37

score 3 · Answer 1 · answered Sep 01 '09 at 11:10

3

Set the brush MappingMode = BrushMappingMode.Absolute

answered Sep 01 '09 at 11:10

Nir

29,306
10
67
103

thanks. i've looked at Absolute, but could not figure out how to calculate the Start/End Point locations. – Todd Main Sep 02 '09 at 00:38

Todd Main · Accepted Answer · 2010-08-02T06:15:56.767

This works like a charm now in the new Silverlight 4 - setting the angle to 45 degrees in RotateTransform does so for the bounding box instead of the shape. Like this:

  <Rectangle Width="70" Height="50">
    <Rectangle.Fill>
        <LinearGradientBrush  EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFF70202" Offset="0"/>
            <GradientStop Color="#FFF7F206" Offset="1"/>
            <GradientStop Color="Black" Offset="0.49"/>
            <GradientStop Color="Black" Offset="0.51"/>
            <GradientStop Color="White" Offset="0.5"/>
            <LinearGradientBrush.RelativeTransform>
            <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45"></RotateTransform>
            </LinearGradientBrush.RelativeTransform>
        </LinearGradientBrush>
    </Rectangle.Fill>

SVG -> WPF linear gradient

2 Answers2