Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I draw a "soft" line in WPF (presumably using a LinearGradientBrush)?

I'm trying to draw a line with soft edges, regardless of the slope.

Here's the code I have so far:

<Line   HorizontalAlignment="Stretch" VerticalAlignment="Center"
        Stretch="Uniform" StrokeThickness="5" X1="0" Y1="0" X2="1" Y2="0">
    <Shape.Stroke>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="Transparent" Offset="0" />
            <GradientStop Color="Green" Offset="0.5" />
            <GradientStop Color="Transparent" Offset="1" />
        </LinearGradientBrush>
    </Shape.Stroke>
</Line>

This makes sense to me, since the line is horizontal, and the linear gradient is vertical, with the edges being transparent and the middle of the line being solid green.

The result is pleasing:

Zoomed in so you can see the gradient:
http://img225.imageshack.us/img225/5027/horizontalsoftlinezoomeb.png

However, when the line is no longer horizontal, the gradient is calculated based on the line's bounding rectangle, rather than on the geometry of the line itself. The result is a slanted line that is shaded vertically, instead of the gradient being perpendicular to the line:

Does anyone know how WPF handles soft edges? I can't find anything on Google or MSDN, and I know there is a way to do this somewhow...

like image 862
Giffyguy Avatar asked Sep 11 '09 19:09

Giffyguy


2 Answers

Well, I do not know if that is applicable to your scenario but you could simply rotate the horizontal line using LayoutTransform and the gradient will be okay.

<Line   HorizontalAlignment="Stretch" VerticalAlignment="Center"
    Stretch="Uniform" StrokeThickness="5" X1="0" Y1="0" X2="1" Y2="0">
<Shape.Stroke>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Green" Offset="0.5" />
        <GradientStop Color="Transparent" Offset="1" />
    </LinearGradientBrush>
</Shape.Stroke>
    <Line.LayoutTransform>
        <RotateTransform Angle="40"/>
    </Line.LayoutTransform>

like image 131
Milan Nankov Avatar answered Oct 17 '22 19:10

Milan Nankov


Try to use a shape instead of a line

<Path Data="M0,0 L25,25 z" Fill="#FFF4F4F5" StrokeThickness="5" Canvas.Left="122" Canvas.Top="58">
<Path.Stroke>
    <LinearGradientBrush EndPoint="1.135,0.994" StartPoint="-0.177,-0.077">
        <GradientStop Color="Black"/>
        <GradientStop Color="#FF68A8FF" Offset="1"/>
    </LinearGradientBrush>
</Path.Stroke>

Tomer

like image 2
Tomer Shamam Avatar answered Oct 17 '22 20:10

Tomer Shamam