Articles in this section
Category / Section

How to create Circular Gauge with a graphical image as the background?

3 mins read

Adding an image to the project

Add the required graphical image to the newly created Xamarin.Forms project. To load and display the added image, configured on a per-platform basis.

Figure 1: Graphical image

Note: The images must be placed according to the following folders of the Xamarin project. And the image build action must be content (right-click->properties->build action->content).

  1. Android (Resources-> Drawables)
  2. iOS (Resources)
  3. Windows Phone (Root folder).

To know more about working with images in Xamarin, click here.

Adding Circular Gauge control over the image

As you need to overlap the Gauge control to the required image, you can choose Grid layout. Also to avoid the interruption of some Gauge elements such as Rim, Labels and Ticks over the image, you can collapse its visibility by the respective Boolean property available in the scale.


<Image Source="gaugeBg.png" />
        <gauge:SfCircularGauge x:Name="gauge1" 
VerticalOptions="FillAndExpand" HeightRequest="400">
                <gauge:Scale    StartValue="0"
  SweepAngle="270" ShowLabels="False" ShowTicks="False"
                        <gauge:NeedlePointer x:Name="needle" Color="Red"  Value="5" LengthFactor="0.5"
         KnobColor="Red" KnobRadius="20"  />

Adding Digital Gauge to enhance the view

To enhance the view, you can add the easily customizable Digital Gauge control, to view the Pointer value in digital characters.


 <gauge:SfDigitalGauge x:Name="DigitalGauge" Value="5" BackgroundColor="Transparent"    CharacterSpacing="2">

Sample output:

Figure 2: Graphical image in the background

Sample Link: CarDashBoardSample.Zip


I hope you enjoyed learning about how to create Circular Gauge with a Graphical image as the background.

You can refer to our Xamarin.Forms Circular Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment