I've made a gradient, I like expression blending very much, and I'm trying to study if I can make gradient curve around a corner, give me a rounded border effect with gradient.
The problem is that I can't use normal borders because the gradients are inconsistent.
I suggest that the following should help to present my ideas: Rounded corners 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 bend around the corner as I think? I saw a suggestion of nesting borders on the Internet, but it didn't help me either, because gradients make life difficult.
#1 building
<Grid x:Name="grid" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100" Height="100" Margin="200,200,0,0"> <Rectangle VerticalAlignment="Stretch" Width="20" HorizontalAlignment="Right" Margin="0,20,0,20" StrokeThickness="0" Panel.ZIndex="0"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0" StartPoint="0,0"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Bottom" Height="20" HorizontalAlignment="Stretch" Margin="20,0,20,0"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,1" StartPoint="1,0"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Stretch" Width="20" HorizontalAlignment="Left" Margin="0,20,0,20" StrokeThickness="0" Panel.ZIndex="0"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0,0" StartPoint="1,0"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Top" Height="20" HorizontalAlignment="Stretch" Margin="20,0,20,0"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0" StartPoint="1,1"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Top" Height="20" Width="20" HorizontalAlignment="Left" Margin="0,0,0,0"> <Rectangle.Fill> <RadialGradientBrush Center=".9,.9" GradientOrigin="1,1" RadiusX=".85" RadiusY=".85"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Bottom" Height="20" Width="20" HorizontalAlignment="Right" Margin="0,0,0,0"> <Rectangle.Fill> <RadialGradientBrush Center=".1,.1" GradientOrigin="0,0" RadiusX=".85" RadiusY=".85"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Top" Height="20" Width="20" HorizontalAlignment="Right" Margin="0,0,0,0"> <Rectangle.Fill> <RadialGradientBrush Center=".1,.9" GradientOrigin="0,1" RadiusX=".85" RadiusY=".85"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle VerticalAlignment="Bottom" Height="20" Width="20" HorizontalAlignment="Left" Margin="0,0,0,0"> <Rectangle.Fill> <RadialGradientBrush Center=".9,.1" GradientOrigin="1,0" RadiusX=".85" RadiusY=".85"> <GradientStop Color="#00FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> <GradientStop Color="#22FFFFFF" Offset="0.5"/> <GradientStop Color="#11FFFFFF" Offset="0.3"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Grid>
#2 building
You may want to see Charles Petzolds on the graph path of gradient color , in which he discusses issues similar to yours.