CODEWITHSUNDEEP
chartsuwpuwp-xamlsyncfusion
Ajai
Ajai

Reputation: 1169

Adding animation in Syncfusion UWP

I am using Syncfusion in UWP app to create a line chart. And I am trying to add animation such that the line extends when we add new data to the collection. Didn't find any help on documentation. The default animation draws between every two data points in it. no other animation was present. Any help is appreciated

Upvotes: 0

Views: 100

Answers (1)

S. Durgadevi
S. Durgadevi

Reputation: 32

Currently We don’t have inbuilt support for animation when the new data point is added to the series dynamically. However, we can achieved your requirement by using CustomTemplate to the LineSeries and the storyboard has been defined in that template for animation. Please find the below code sample for reference,

MainWindow.xaml: 

<chart:LineSeries ItemsSource="{Binding Collection}"  
                            XBindingPath="XValue" YBindingPath="YValue" 
                            > 
           <chart:LineSeries.CustomTemplate> 
                <DataTemplate> 
                    <Canvas > 
                        <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}"   Y2="{Binding Y2}" Loaded="Line_Loaded"  Stroke="{Binding Interior}" Name="line"> 
                            <Line.Resources> 
                                <Storyboard x:Name="story" > 
                                    <DoubleAnimation x:Name="Danimation1" EnableDependentAnimation="True" Storyboard.TargetName="line" Storyboard.TargetProperty="X2" From="{Binding X1}" To="{Binding X2 }" /> 
                                    <DoubleAnimation x:Name="Danimation2" EnableDependentAnimation="True" Storyboard.TargetName="line" Storyboard.TargetProperty="Y2" From="{Binding Y1}" To="{Binding Y2}" /> 
                                </Storyboard> 
                            </Line.Resources> 
                        </Line> 
                    </Canvas> 

                </DataTemplate> 
            </chart:LineSeries.CustomTemplate> 

        </chart:LineSeries>

MainWindow.cs: 

private void Line_Loaded(object sender, RoutedEventArgs e) 
{

        var line = sender as Line; 

        Storyboard sb = line.Resources["story"] as Storyboard;            
        sb.Begin();           
}

We have prepared a demo sample based on your requirement and it can be downloaded from the below link, Sample: Sample

Regards,

Durgadevi S

Upvotes: 1

Related Questions