How to add an image as a background of WinUI Radial Gauge control (SfRadialGauge)?

This article describes how to set an image as a background of the Syncfusion WinUI Radial Gauge control.

You can display any content as background of Radial Gauge using the BackgroundContent property of the RadialAxis. This article will demonstrate how to display an image as a background.

The following steps explain how to set an image to BackgroundContent property of the axis.

Step 1: Adding an image to the project

Create a folder called Images and copy the required image to it. Right-click the added image file and select properties, then select the EmbeddedResource option under BuildAction.

Step 2: Set an image to the background of the radial axis

Create the radial gauge control by referring to the getting started link and set the corresponding image to the BackgroundContent property as demonstrated in the following code example.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis>
            <gauge:RadialAxis.BackgroundContent>
                <Image Source="Images/AxisBackground.png" />
            </gauge:RadialAxis.BackgroundContent>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Output

View the sample on GitHub

See also

How to customize the axis label content using a prepared event

Marker pointer customization support in radial gauge

Various annotations customizations in radial gauge