Category / Section
How to animate circular gauge pointer when switching between tabs
1 min read
Range pointer in the circular gauge is being animated on load time and on dynamic pointer value change cases.
Behavior of the TappedPage control is creating circular gauge instances in tabbed pages on load time. When switching between a tab to another, range pointer is not animated.
To achieve pointer animation on switching between tabs, refresh the pointer value in the CurrentPageChanged event.
Code snippet
this.CurrentPageChanged += (object sender, EventArgs e) =>
{
var page = this.CurrentPage;
var gauge = (page as ContentPage).Content as SfCircularGauge;
if (gauge !=null)
{
// gauge.Scales[0].Pointers[0].Value = 80; //Without ViewModel
model.TodayPointerValue = 80; // With ViewModel
}
else
{
//Without ViewModel
// var child1 = ((this.Children[0] as ContentPage)).Content;
// (child1 as SfCircularGauge).Scales[0].Pointers[0].Value = 0;
model.TodayPointerValue = 0; // With ViewModel
}
};
Sample for range pointer animation can be downloaded from this link: https://www.syncfusion.com/downloads/support/directtrac/206729/ze/CircularTab818702332
