Rudi Grobler

Subtle background effect using Radial Gradient Brush in WPF

Recently I needed to create a background for a WPF application that looks like it has a lens flare in the bottom right hand corner. This is a relatively simple effect that can create great looking backgrounds. It is similar to the background effect used in the XBOX 360.

When I started, I first tried to do this in blend. Blend has no easy method of changing the center of a Radial Gradient Brush so I flipped back to VS (For the Intelli-sense) and started testing...

RadialGradientBush basically has 4 properties you need to use:

I changed the Center and GradientOrigin both to (0.85,0.85) and the RadiusX and RadiusY to 0.75 and this is the effect I ended up with:

Also play around with the colors and the opacity of each gradient stop to customize the effect even more!

A great way to actually test these type of features is to bind each value you might need to change to a slider. Here is the XAML

<Window x:Class="Background.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:Background"
    Title="Radial gradient background" Height="600" Width="800">
    <Window.Resources>
        <src:PointConverter x:Key="conv" />
    </Window.Resources>
    <Grid>
        <Grid.Background>
            <RadialGradientBrush 
                Center="{Binding ElementName=Center, Path=Value, Converter={StaticResource conv} }" 
                RadiusX="{Binding ElementName=RadiusX, Path=Value}" 
                RadiusY="{Binding ElementName=RadiusY, Path=Value}" 
                GradientOrigin="{Binding ElementName=GradientOrigin, Path=Value, Converter={StaticResource conv} }"> 
                    <GradientStop Color="#FAFAFAFA" Offset="0"/>
                    <GradientStop Color="#B2171F6E" Offset="0.971"/>
            </RadialGradientBrush>
        </Grid.Background>
        <StackPanel>
            <TextBlock Text="Center" />
            <Slider x:Name="Center" Minimum="0" Maximum="1" Value="0.5" Width="300" HorizontalAlignment="Left" />
            <TextBlock Text="RadiusX" />
            <Slider x:Name="RadiusX" Minimum="0" Maximum="1" Value="0.5" Width="300" HorizontalAlignment="Left"/>
            <TextBlock Text="RadiusY" />
            <Slider x:Name="RadiusY" Minimum="0" Maximum="1" Value="0.5" Width="300" HorizontalAlignment="Left" />
            <TextBlock Text="GradientOrigin" />
            <Slider x:Name="GradientOrigin" Minimum="0" Maximum="1" Value="0.5" Width="300" HorizontalAlignment="Left"/>
        </StackPanel>
    </Grid>
</Window>

I just created a convertor that takes a double value (default of the slider) and convert it to a Point value. I make X and Y of the point equal but it is also possible to bind a slider to the X and another to the Y.

    public class PointConverter : IValueConverter
    {
        public object Convert(object value, Type typeTarget, object param, CultureInfo culture)
        {
            return new Point((double) value, (double) value);
        }
        public object ConvertBack(object value, Type typeTarget, object param, CultureInfo culture)
        {
            Point p = (Point) value;
            return p.X;
        }
    }

And now you can play with your exact settings for fine-tuning the effect