radialgradientbrush on a path with center outside the path

10-29-2009 11:57 PM |

i have a path in the shape of an arc like a donut cut into half. i need to get radial gradiance brush with gradient stop from light to dark. however even if i set the center in RadialGradientBrush to be the center of the the arc (which would be the center of the circle if it was a full 360 degrees donut) the gradiance always srarts inside the path. it does not consider the circle center as the center. how do i achieve this? it works on large arc but for smaller ones, it does not work as expected.

 

Re: radialgradientbrush on a path with center outside the path

10-30-2009 2:36 PM |

Expression Studio or Blend can help you. 

    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="640" Height="480" Clip="F1 M 0,0L 640,0L 640,480L 0,480L 0,0" UseLayoutRounding="False">
        <Canvas x:Name="Layer_1" Width="640" Height="480" Canvas.Left="0" Canvas.Top="0">
            <Path x:Name="Path" Width="119.487" Height="216.509" Canvas.Left="155.5" Canvas.Top="90" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 168,102.5C 300,104.5 287.5,295.5 169,294" StrokeThickness="25" StrokeLineJoin="Round">
                <Path.Stroke>
                    <RadialGradientBrush RadiusX="0.895522" RadiusY="0.494289" Center="0.0920603,0.478041" GradientOrigin="0.0920603,0.478041">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="#FF000000" Offset="0.767241"/>
                            <GradientStop Color="#FFD1D1D1" Offset="1"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <SkewTransform CenterX="0.0920603" CenterY="0.478041" AngleX="1.01183" AngleY="0"/>
                                <RotateTransform CenterX="0.0920603" CenterY="0.478041" Angle="-0.443267"/>
                            </TransformGroup>
                        </RadialGradientBrush.RelativeTransform>
                    </RadialGradientBrush>
                </Path.Stroke>
            </Path>
        </Canvas>
    </Canvas>

 

Want to post the xaml for your arc?

Re: radialgradientbrush on a path with center outside the path

10-30-2009 2:39 PM |

The gradient tool lets you set the scope of the gradient. You can also bring the two color points of the gradient out to the edge of the arc.

 

Re: radialgradientbrush on a path with center outside the path

10-30-2009 7:15 PM |

Ah. should have posted the xaml in my post. here it is:

 

<Canvas x:Name="Layer_1" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
		<Path x:Name="Path" Width="242.199" Height="183.5" Canvas.Left="249.301" Canvas.Top="153.5" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 249.801,250.006C 264.649,241.109 281.984,236 300.5,236C 355.452,236 400,280.995 400,336.5L 490,329C 490.862,329.037 491,325.035 491,321C 491,228.769 419.142,154 330.5,154C 308.581,154 287.689,158.572 268.655,166.848L 249.801,250.006 Z " RenderTransformOrigin="-0.001,1">
			<Path.Fill>
				<RadialGradientBrush Center="121.1,91.75" GradientOrigin="121.1,91.75" RadiusX="120.6" RadiusY="91.25" MappingMode="Absolute">
					<GradientStop Color="Black"/>
					<GradientStop Color="#FFC1D8B7" Offset="1"/>
				</RadialGradientBrush>
			</Path.Fill>
			<Path.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Path.RenderTransform>
		</Path>
	</Canvas>

 I took your xaml. but it seems like it is a semi circle with an arc which has gradient. i tried the same for my arc. but did work. probably because it can find the center outsdie the path?

Re: Re: radialgradientbrush on a path with center outside the path

10-31-2009 11:21 AM |

the above was supposed to be :

i tried the same for my arc. but it didnt work. probably because it cant find the center outside the path?

Thanks 

Re: Re: Re: radialgradientbrush on a path with center outside the path

11-01-2009 2:36 AM |

Awesome. thanks.