Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Rounded corners - is a consistent gradient around the corner possible?

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.

like image 439
Louis Sayers Avatar asked Mar 01 '23 00:03

Louis Sayers


1 Answers

You might want to check out Charles Petzolds article on Graphical Paths with Gradient Colors in which he discusses a similar problem to yours.

like image 83
Ruben Steins Avatar answered Mar 04 '23 10:03

Ruben Steins