XAML RadialGradientBrush

RadialGradientBrush is used to draw graphics objects with a radial gradient. This article shows how to use RadialGradientBrush element of XAML.
  • 3773

The <RadialGradientBrush/> represents the radial gradient brush in XAML. Radial gradient brush provides gradient similar to linear gradient brush, however a linear gradient brush has a start point and end point and blending is done from the start and ending, while radial gradient brush has a circle.

In a radial gradient brush, you specify the gradient origin, center, and circle's X,Y radius values and GradientStop attribute specify the color of the gradient.

The following source code draws a rectangle and fills with a radial gradient brush with multiple colors.

 <Rectangle Width="300" Height="300" Stroke="Black" StrokeThickness="2">
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.1,0.4" Center="0.6,0.5" RadiusX="0.5" RadiusY="0.5">
           <RadialGradientBrush.GradientStops>
                <GradientStop Color="Red" Offset="0" />
                <GradientStop Color="Black" Offset="0.20" />
                <GradientStop Color="Yellow" Offset="0.40" />
                <GradientStop Color="Pink" Offset="0.60" />
                <GradientStop Color="Blue" Offset="0.80" />
                <GradientStop Color="Green" Offset="1.0" />
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

The output looks like Figure 1.

 radialgradientbrush.gif

Figure 1. Rectangle filled with a radial gradient brush
 

Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
 
© 2018 DotNetHeaven. All rights reserved.