How to set a graphical frame image as a background of .NET MAUI?

This article describes how to set a graphical frame image as a background of the .NET MAUI Radial Gauge control.

You can display any visual content as a background using the BackgroundContent property of the RadialAxis.

Step 1: Adding an image to the project

Place the graphical frame image in the Resources/Images directory of your .NET MAUI project. The image can then be accessed using its name.

For more details on managing images in .NET MAUI, see the official documentation.

Step 2: Set a graphical frame image as the background of the radial axis

Create a radial gauge control and set your image to the BackgroundContent property. Refer to the basic setup in the getting-started guide if needed, and use the following code example to set your image:

XAML

<gauge:SfRadialGauge>
        <gauge:SfRadialGauge.Axes>
            <gauge:RadialAxis … >
               …
                <gauge:RadialAxis.BackgroundContent>
                    <Image Source="dark_theme_gauge.png"/>
                </gauge:RadialAxis.BackgroundContent>
            </gauge:RadialAxis>
        </gauge:SfRadialGauge.Axes>
 </gauge:SfRadialGauge>

Output

Download the complete sample on GitHub.