I've made a gradient that I quite like in expression blend, and I'm trying to work out if I can make the gradient curve around a corner, to give me a rounded border effect with the gradient.
The problem is that I can't use a normal border, because the gradient wont be consistent.
I came up with the following which should help demonstrate what I'm thinking: rounded corner with gradient http://img232.imageshack.us/img232/9899/roundedcornerrg0.th.jpg
<Grid x:Name="grid" >
<Border
BorderThickness="0,0,40,40"
CornerRadius="0,0,40,0"
Padding="2" Height="60" VerticalAlignment="Bottom" Width="65" HorizontalAlignment="Right" >
<Border.BorderBrush>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.058" ScaleY="2.177"/>
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
<RotateTransform Angle="-119.481" CenterX="0.5" CenterY="0.5"/>
<TranslateTransform X="0.209" Y="0.52"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#000A0A0A" Offset="1"/>
<GradientStop Color="#6B050505" Offset="0.829"/>
<GradientStop Color="#BB020202" Offset="0.763"/>
</RadialGradientBrush>
</Border.BorderBrush>
</Border>
<Rectangle VerticalAlignment="Stretch" Height="100" Width="40" HorizontalAlignment="Right" Margin="0,0,0,60" StrokeThickness="0" Panel.ZIndex="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="-0.025,0.5" StartPoint="1,0.5">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#000A0A0A" Offset="1"/>
<GradientStop Color="#6B050505" Offset="0.829"/>
<GradientStop Color="#BB020202" Offset="0.763"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle VerticalAlignment="Bottom" Height="40" Width="100" HorizontalAlignment="Stretch" Margin="0,0,65,0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#000A0A0A" Offset="1"/>
<GradientStop Color="#6B050505" Offset="0.829"/>
<GradientStop Color="#BB020202" Offset="0.763"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
Is there any way to get a gradient bending around a corner like I'm thinking? I saw a suggestion online to nest borders in each other, but this is no good for me either, as the gradient makes life difficult.
You might want to check out Charles Petzolds article on Graphical Paths with Gradient Colors in which he discusses a similar problem to yours.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With