locked
gradient along a path RRS feed

  • Question

  • I need to draw several paths where the gradient sticks along the path. How would I draw something like that in xaml ? (See attached image for an example)

     

    http://img402.imageshack.us/img402/319/gradientpathgq7.jpg

     

    If there is no decent way to achieve this effect in xaml, do you have an idea how to go about deriving the Path class that has this feature? How approximately could an algorithm look like that takes a gradient object and extrudes that along the spline?

     

    How are the chances that WPF v2 will support this?

     

    Wednesday, May 16, 2007 12:05 PM

Answers

  • Here's an interesting hack for your fuzzy black lines... it has some centering issues and it doesn't scale to support your rainbow line, but it's still interesting and could be automated with a custom control:

     

    Code Snippet

     

      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="10" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFE5E5E5" StrokeThickness="9" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFCBCBCB" StrokeThickness="8" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFB1B1B1" StrokeThickness="7" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF9A9A9A" StrokeThickness="6" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF7F7F7F" StrokeThickness="5" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF676767" StrokeThickness="4" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF4C4C4C" StrokeThickness="3" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF323232" StrokeThickness="2" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF181818" StrokeThickness="1" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>

     

    If your content is static, you might want to try doing it in Expression Design (not Blend) and export it to XAML.  It will automatically turn it into layers that approximate the gradient effect.

    Friday, May 18, 2007 1:05 AM

All replies

  • What you have right there is half of a radial gradient...but something tells me that you want more options than that.
    Wednesday, May 16, 2007 4:52 PM
  • No this is not a radial gradient, it is acutally a path. Gues it was a bad example, here is a better one:

     

    http://img503.imageshack.us/img503/3690/gradientpathdy8.jpg

     

     

    Thursday, May 17, 2007 12:18 PM
  • did you try applying OuterGlow bitmap effect to the path
    Thursday, May 17, 2007 12:50 PM
  • You can use a gradient as the fill brush of a path I think...of course that would require a closed path. And I'm not sure if the gradient would follow the curvature of the path either. I'm sure there's a graphics programmer somewhere out there who could make such a beast as a bitmap effect.

    Of course then you'd have to deal with the performance concerns that bitmap effects bring.

    Thursday, May 17, 2007 9:14 PM
  •  lee d wrote:
    did you try applying OuterGlow bitmap effect to the path

    Sorry to be so unprecise I was really looking to find a way to extrude a LinearGradientBrush along a Path . Just like this:

     

    http://img382.imageshack.us/my.php?image=pathyr1.jpg

     

    I don't hink outter glow can do that.

    Thursday, May 17, 2007 10:01 PM
  •  ivolved_Mike_Brown wrote:

    You can use a gradient as the fill brush of a path I think...of course that would require a closed path. And I'm not sure if the gradient would follow the curvature of the path either. I'm sure there's a graphics programmer somewhere out there who could make such a beast as a bitmap effect.

    Of course then you'd have to deal with the performance concerns that bitmap effects bring.

     

    No, the gradient doesn't follow the path, not if I use a GradientBrush for the Path's pen not if I fill a closed path with a gradient. The performance panelty of a bitmapeffect is not realy acceptable either. So I Guess we are at a point now where we reallize that something like that is not possible in WPF v1. Wich brings me to the question, (*waving at the wpf-team*) what about WPF v2 ?

    Thursday, May 17, 2007 10:06 PM
  • Sounds a bit (but not quite) like the PathGradientBrush in WinForms.  http://samples.gotdotnet.com/quickstart/winforms/doc/PathGradient.jpg

    Unfortunately there isn't yet a PathGradientBrush in WPF.

    Friday, May 18, 2007 12:42 AM
  • Here's an interesting hack for your fuzzy black lines... it has some centering issues and it doesn't scale to support your rainbow line, but it's still interesting and could be automated with a custom control:

     

    Code Snippet

     

      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFFFFFFF" StrokeThickness="10" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFE5E5E5" StrokeThickness="9" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFCBCBCB" StrokeThickness="8" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FFB1B1B1" StrokeThickness="7" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF9A9A9A" StrokeThickness="6" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF7F7F7F" StrokeThickness="5" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF676767" StrokeThickness="4" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF4C4C4C" StrokeThickness="3" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF323232" StrokeThickness="2" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>
      <Path Fill="{x:Null}" Stretch="Fill" Stroke="#FF181818" StrokeThickness="1" Width="87.009" Height="62" Data="M69,69 C68.00046,127 155,24 155,130" HorizontalAlignment="Left" Margin="68.491,68.5,0,0" VerticalAlignment="Top"/>

     

    If your content is static, you might want to try doing it in Expression Design (not Blend) and export it to XAML.  It will automatically turn it into layers that approximate the gradient effect.

    Friday, May 18, 2007 1:05 AM