Edit

RadialGradientBrush

  • Article

Warning

This control has been deprecated in the Windows Community Toolkit. Please use the RadialGradientBrush from WinUI instead.

The RadialGradientBrush is a Brush that fills an area with a radial gradient. A focal point defines the beginning of the gradient, and a circle defines the end point of the gradient. It is a drop-in replacement for the System.Windows.Media.RadialGradientBrush. However, the Transform, RenderTransform, and MappingMode properties aren't supported.

Try it in the sample app

WPF Conversion Notes

When porting your brush XAML from WPF, just add the media: namespace prefix to your RadialGradientBrush and add the xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media" to your XAML namespace list.

If you used the Absolute MappingMode you'll need to convert to the RelativeToBoundingBox mode first and recalculate your RadiusX, RadiusY, Center, and GradientOrigin property values.

The Animation or Binding of GradientStop Offset and Color properties is not supported.

Syntax

<Rectangle Width="300" Height="300" Stroke="Black" StrokeThickness="2">
  <Rectangle.Fill>
    <media:RadialGradientBrush 
            AlphaMode="Premultiplied"
            RadiusX="0.2" RadiusY="0.2"
            SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.25" />
        <GradientStop Color="Yellow" Offset="0.50" />
        <GradientStop Color="Transparent" Offset="0.75" />
        <GradientStop Color="Green" Offset="1.0" />
    </media:RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Example Image

Radial Gradient

Properties

Property Type Description
AlphaMode AlphaMode Specifies how the alpha channel affects color channels. The default is Straight for compatibility with WPF; however, the Premultiplied value may provide a more natural transition to transparent values.
Center Windows.Foundation.Point The center of the outermost circle of the radial gradient. The default is 0.5,0.5.
ColorInterpolationMode ColorInteropolationMode Specifies how the gradient's colors are interpolated. The default is SRgbLinearInterpolation.
FallbackColor Windows.UI.Color The color to use for rendering in case the CompositionBrush can't be rendered.
GradientOrigin Windows.Foundation.Point The location of the two-dimensional focal point that defines the beginning of the gradient. The default is 0.5,0.5.
GradientStops Windows.UI.Xaml.Media.GradientStopCollection The brush's gradient stops. Individual GradientStop's Offset and Color properties can't be bound or animated.
Opacity double Gets or sets the degree of opacity of a Brush.
RadiusX double The horizontal radius of the outermost circle of the radial gradient. The default is 0.5.
RadiusY double The vertical radius of the outermost circle of the radial gradient. The default is 0.5.
SpreadMethod GradientSpreadMethod The type of spread method that specifies how to draw a gradient that starts or ends inside the bounds of the object to be painted. The default is Pad.

Note

The Transform, RenderTransform, and MappingMode properties aren't supported.
The Animation or Binding of GradientStop Offset and Color properties is not supported.

Sample Project

RadialGradientBrush sample page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Media
NuGet package Microsoft.Toolkit.Uwp.UI.Media

API