XAML RadialGradientBrush
RadialGradientBrush is used to draw graphics objects with a radial gradient. This article shows how to use RadialGradientBrush element of XAML.
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.
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