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

Repeat Animations on SfChart in UWP

I have a BarSeries with an animation enabled on it. I'd like that animation to repeat itself when the itemsource is updated. Is there a way to trigger this in code or xaml?

1 Reply

DA Devi Aruna Maharasi Murugan Syncfusion Team August 14, 2017 08:54 AM UTC

Hi Jeffrey, 
Thanks for contacting Syncfusion Support. 
We have achieved your requirement (animating BarSeries when its ItemsSource gets updated), by calling the Animate() of CustomBarSeries, after the ItemsSource has updated and it can achieved as shown in the below code snippet, 
  public class CustomBarSeries: BarSeries 
        private Storyboard sb; 
        public void Animate() 
            int i = 0; 
            if (sb != null) 
            sb = new Storyboard(); 
            string path = !IsTransposed ?      
                 "(UIElement.RenderTransform).(ScaleTransform.ScaleX)" :  
            string adornTransPath = !IsTransposed ?  
                    "(UIElement.RenderTransform).(TranslateTransform.X)" :    
           foreach (ChartSegment segment in Segments) 
                double elementSize = 0d; 
                var element = (FrameworkElement)segment.GetRenderedVisual(); 
                if (segment is EmptyPointSegment && (!(EmptyPointStyle ==   
                      EmptyPointStyle.Interior) ||  
                      EmptyPointStyle == EmptyPointStyle.SymbolAndInterior)) 
                    elementSize = !IsTransposed ?   
                    ((EmptyPointSegment)segment).EmptyPointSymbolWidth :  
                    elementSize = !IsTransposed ? ((BarSegment)segment).XData :  
                if (!double.IsNaN(elementSize) && !double.IsNaN(YValues[i])) 
                    element.RenderTransform = new ScaleTransform(); 
                    if (YValues[i] < 0 && !IsTransposed) 
                        element.RenderTransformOrigin = new Point(1, 1); 
                    else if (YValues[i] > 0 && IsTransposed) 
                        element.RenderTransformOrigin = new Point(1, 1); 
                    DoubleAnimationUsingKeyFrames keyFrames1 = new  
                    SplineDoubleKeyFrame keyFrame1 = new SplineDoubleKeyFrame(); 
                    keyFrame1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)); 
                    keyFrame1.Value = 0; 
                    keyFrame1 = new SplineDoubleKeyFrame(); 
                    keyFrame1.KeyTime = KeyTime.FromTimeSpan(AnimationDuration); 
                    KeySpline keySpline1 = new KeySpline(); 
                    keySpline1.ControlPoint1 = new Point(0.64, 0.84); 
                    keySpline1.ControlPoint2 = new Point(0, 1);  
                    keyFrame1.KeySpline = keySpline1; 
                    keyFrame1.Value = 1; 
                    keyFrames1.EnableDependentAnimation = true; 
                    Storyboard.SetTargetProperty(keyFrames1, path); 
                    Storyboard.SetTarget(keyFrames1, element); 
  <Grid > 
                <RowDefinition Height="100"/> 
            <chart:SfChart Margin="10" x:Name="chart"> 
            <Button Click="add_Click" Grid.Row="1" 
                    Content="Add Data"/> 
private async void add_Click(object sender, RoutedEventArgs e) 
            var count = (bar.ItemsSource as ObservableCollection<Model>).Count - 1; 
            var itemsSource = bar.ItemsSource as ObservableCollection<Model>; 
            itemsSource.Add(new Model() { XValue = itemsSource[count].XValue + 1,  
                            YValue = rd.Next(20, 45) }); 
            if (bar.EnableAnimation) 
               await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, bar.Animate); 
The demo sample can be downloaded from below link, 

Live Chat Icon For mobile
Up arrow icon