WPF drawing using a RadialGradientBrush type effect?

Question

Using a RadialGradientBrush is simple and allows a center colour to merge into an outer colour. This works fine as a brush for filling the inside of a Rectangle or Border. I want to achieve the effect of applying that brush as if it were a pen and apply it as the Border.BorderBrush. So the center of the border would be dark and away from the border it would fade away.

Another way to describe it is the shadow you see around top level windows on Windows Vista or Windows 7. Close to the window border the shadow is dark and the further away you go from the window the more the shadow fades away. Well I want to draw a Border in a similar way.

I cannot find any way to achieve this at the moment, using either the RadialGradientBrush or the LinearGradientBrush. Surely it must be possible? Any ideas?

Answer 1

You could achieve an effect like this

by placing your content in the center (cell 1,1) of a 3x3 Grid like this:

<Grid>
    <Grid.Resources>
        <Color x:Key="InnerColor">#FF000000</Color>
        <Color x:Key="OuterColor">#FFFFFFFF</Color>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20"/>
        <ColumnDefinition />
        <ColumnDefinition Width="20"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Column="1" Grid.Row="0">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{StaticResource OuterColor}"/>
                <GradientStop Offset="1" Color="{StaticResource InnerColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="1" Grid.Row="2">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0" Color="{StaticResource OuterColor}"/>
                <GradientStop Offset="1" Color="{StaticResource InnerColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="1">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,1" Center="1,1" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0,1" Center="0,1" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="0" Grid.Row="2">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="1,0" Center="1,0" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
    <Rectangle Grid.Column="2" Grid.Row="2">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0,0" Center="0,0" RadiusX="1" RadiusY="1">
                <GradientStop Offset="0" Color="{StaticResource InnerColor}"/>
                <GradientStop Offset="1" Color="{StaticResource OuterColor}"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

Answer 2

You could try and use a Grid or a DockPanel and then use Line or Rectangle to create 4 filled distinct regions. However, you can't use a RadialGradient in this case because it will stretch, and look wrong. So instead you could create 4 different LinearGradients which were setup to graduate in the 4 different directions you want.....however, I don't think this would look right either in the corners...as they need to be mitred...and this won't do that.

So...

...you could try and use this GradientPath control that knows how to draw a gradient along a path.

• http://www.charlespetzold.com/blog/2009/02/Graphical-Paths-with-Gradient-Colors.html

Note, I haven't been able to spend much time with it so I haven't worked out how to use it properly - the start and end caps of the rectangle aren't quite right.

Note using a PathGeometry instead of RectangleGeometry still has the same problem.

One possible workaround is to create 2 rectangles with GradientPath and then cut them through the diagonal (using a suitable Clip definition) so that they each contribute the good part of the rectangle (i.e. without the start/end artifact)...and overlay them in a Grid.

Or you could dig into the GradientPath code.

It should give you some ideas if you want to take this approach....and play around/experiment at your leisure till it is how you want it.

<gpl:GradientPath Name="gradientPath2"
                  StrokeThickness="30"
                  >
    <gpl:GradientPath.Data>
        <RectangleGeometry Rect="0,0,200,200" />
    </gpl:GradientPath.Data>
    <gpl:GradientPath.GradientStops>
        <GradientStop Offset="0" Color="Blue" />
        <GradientStop Offset="0.5" Color="Red" />
        <GradientStop Offset="1" Color="Green" />
    </gpl:GradientPath.GradientStops>
</gpl:GradientPath>