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

Todd Main Todd Main · Accepted Answer · 2010-02-20T03:13:48

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 Answers