How to create SfCircularGauge with a Graphical image as the background?
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).
- Android (Resources-> Drawables)
- iOS (Resources)
- 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.
XAML
<Grid> <Image Source="gaugeBg.png" /> <gauge:SfCircularGauge x:Name="gauge1" VerticalOptions="FillAndExpand" HeightRequest="400"> <gauge:SfCircularGauge.Scales> <gauge:Scale StartValue="0" EndValue="9" Interval="10" StartAngle="90" SweepAngle="270" ShowLabels="False" ShowTicks="False" ShowRim="False"> <gauge:Scale.Pointers> <gauge:NeedlePointer x:Name="needle" Color="Red" Value="5" LengthFactor="0.5" Thickness="5" KnobColor="Red" KnobRadius="20" /> </gauge:Scale.Pointers> </gauge:Scale> </gauge:SfCircularGauge.Scales> </gauge:SfCircularGauge> </Grid>
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.
XAML
<Grid> <gauge:SfDigitalGauge x:Name="DigitalGauge" Value="5" BackgroundColor="Transparent" CharacterSpacing="2"> </gauge:SfDigitalGauge> </Grid>
Sample output:
Figure 2: Graphical image in the background
Sample Link: CarDashBoardSample.Zip