We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create SfCircularGauge with a Graphical image as the background?

Platform: Xamarin.Forms |
Control: SfCircularGauge
Tags: general

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.


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.


Sample output:

Figure 2: Graphical image in the background

Sample Link: CarDashBoardSample.Zip

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
Jul 21, 2016
zipped solution is missing circulargauge_layout.xml Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile