Articles in this section
Category / Section

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

6 mins read

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.

 

Image file settings.

 

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

 

WinUI Radial Gauge control with background image.

 

 

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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied