|
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:
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>
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>
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>
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>
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.
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
