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>