Category / Section
How to customize a circular gauge control as a TimeLine gauge?
2 mins read
This article explains the steps required to design a custom timeline render. The marker pointer has been customized as image to indicate the time line value. Header is used for displaying the updated value.
Circular gauge control can be customized as follows:
- Create a Xamarin application and initialize SfCircularGauge control on it.
XAML:
<gauge:SfCircularGauge BackgroundColor="#50707A" x:Name="circulargauge"> <gauge:SfCircularGauge.Scales> <gauge:Scale StartAngle="270" StartValue="0" EndValue="100" Interval="10" SweepAngle="360" ScaleStartOffset="0.85" ScaleEndOffset="0.8" RimColor="#042F3F" MinorTicksPerInterval="0" ShowLabels="false" ShowTicks="false"> </gauge:Scale> </gauge:SfCircularGauge.Scales> </gauge:SfCircularGauge>
- Ranges can be used to know the dim value of weather data.
XAML:
<gauge:Scale.Ranges> <gauge:Range StartValue="5" EndValue="35" OuterStartOffset="0.85" InnerStartOffset="0.8" OuterEndOffset="0.85" InnerEndOffset="0.8" Color="#94C93D"> </gauge:Range> </gauge:Scale.Ranges>
- Pointers can be used to set images in gauges as per the values. Images can be touched and moved to the respective position.
XAML:
<gauge:Scale.Pointers> <gauge:MarkerPointer MarkerShape="Image" Value="4" ImageSource="image1.png" MarkerWidth="60" MarkerHeight="60" > <gauge:MarkerPointer.Offset> <OnPlatform x:TypeArguments="x:Double" iOS="0.92" Android="0.95" /> </gauge:MarkerPointer.Offset> </gauge:MarkerPointer> <gauge:MarkerPointer MarkerShape="Image" Value="30" ImageSource="image2.png" MarkerWidth="60" MarkerHeight="60" > <gauge:MarkerPointer.Offset> <OnPlatform x:TypeArguments="x:Double" iOS="0.9" Android="0.95" /> </gauge:MarkerPointer.Offset> </gauge:MarkerPointer> <gauge:MarkerPointer MarkerShape="Image" Value="70" ImageSource="image3.png" MarkerWidth="60" MarkerHeight="60"> <gauge:MarkerPointer.Offset> <OnPlatform x:TypeArguments="x:Double" iOS="0.9" Android="0.95" /> </gauge:MarkerPointer.Offset> </gauge:MarkerPointer> </gauge:Scale.Pointers>
- Add Headers to know the weather dim value. By using the header, position can be altered as required.
XAML:
<gauge:SfCircularGauge.Headers> <gauge:Header Text="DIM" TextSize="30" ForegroundColor="White" Position="0.5,0.45"/> <gauge:Header x:Name="weatherData" TextSize="25" ForegroundColor="White" Position="0.5,0.56"/> <gauge:Header Text="78d" TextSize="25" ForegroundColor="White" Position="0.9,0.2"/> <gauge:Header Text="1d" TextSize="25" ForegroundColor="White" Position="0.9,0.75"/> </gauge:SfCircularGauge.Headers>
- In code behind, weather dim values can be updated dynamically.
C#:
public partial class CircularTimelinePage : ContentPage
{
Random random = new Random();
public CircularTimelinePage()
{
InitializeComponent();
this.BindingContext = this;
Device.StartTimer(new TimeSpan(0, 0, 0, 0, 1000), TimerElapsed);
}
private bool TimerElapsed()
{
Device.BeginInvokeOnMainThread(() =>
{
Random s = new Random();
int random = s.Next(0, 100);
weatherData.Text = "Dim:" + random;
});
return true;
}
}
Screenshot:
The following screenshot illustrates the custom timeline render gauge.
Please find the complete sample for the above document in the link.
