XAML RadialGradientBrush

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

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">
        <RadialGradientBrush GradientOrigin="0.1,0.4" Center="0.6,0.5" RadiusX="0.5" RadiusY="0.5">
                <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" />

The output looks like Figure 1.


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
© 2020 DotNetHeaven. All rights reserved.