Animating the C1Chart Control

To set the animation effects using the built-in animation options, you can use the following XAML markup:

<my:C1Chart Name="chart">

            <my:C1Chart.Data>

                <my:ChartData>

                    <my:ChartData.LoadAnimation>

                        <!-- load animation -->

                        <my:PlotElementAnimation>

                            <!-- initial style: invisible  -->

                            <my:PlotElementAnimation.SymbolStyle>

                                <Style TargetType="my:PlotElement">

                                    <Setter Property="Opacity" Value="0" />

                                </Style>

                            </my:PlotElementAnimation.SymbolStyle>

                            <my:PlotElementAnimation.Storyboard>

                                <Storyboard >

                                    <!-- display element with index delay -->

                                    <DoubleAnimation

                   Storyboard.TargetProperty="Opacity"

                   my:PlotElementAnimation.IndexDelay="0.5"

                   To="1" Duration="0:0:1" />

                                </Storyboard>

                            </my:PlotElementAnimation.Storyboard>

                        </my:PlotElementAnimation>

                    </my:ChartData.LoadAnimation>

                </my:ChartData>

            </my:C1Chart.Data>

        </my:C1Chart>

And then you can insert the following code directly beneath the InitializeComponent() method:

 

var rnd = new Random();

            chart.MouseLeftButtonDown += (s, e) =>

            {

                chart.Data.Children.Clear();

                // create new data

                var vals = new double[rnd.Next(5, 10)];

                for (int i = 0; i < vals.Length; i++)

                    vals[i] = rnd.Next(0, 100);

                chart.Data.Children.Add(new DataSeries() { ValuesSource = vals });

            };

 

When you run your application, the data will load or re-load on mouse click, showing the animation effect that was set in the XAML markup.


Send us comments about this topic.
Copyright © GrapeCity, inc. All rights reserved.