ComponentOne Chart for WPF and Silverlight
Chart for WPF and Silverlight / Chart Features / Animation
In This Topic
    In This Topic

    Almost all of the plot elements can be animated by using the built-in animation API. Using the built-in animation options simplifies creating various visual animation effects for the C1Chart control's plot elements. The properties contained in the PlotElementAnimation class are as follows:

    Property Description
    IndexDelay An attached property that allows you to specify the animation delay depending on the element's point index.
    Storyboard Gets or sets the storyboard that is applied to the plot element.
    SymbolStyle Gets or sets the symbol style that is applied to the plot element before the storyboard starts.

    Animating the C1Chart control also involves the ChartData.LoadAnimation.

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

    Copy Code
    <c1chart:C1Chart Name="chart">
                            <!-- load animation -->
                                <!-- initial style: invisible  -->
                                    <Style TargetType="c1chart:PlotElement">
                                        <Setter Property="Opacity" Value="0" />
                                    <Storyboard >
                                        <!-- display element with index delay -->
                       To="1" Duration="0:0:1" />

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

    Copy Code
    var rnd = new Random();
                chart.MouseLeftButtonDown += (s, e) =>
                    // 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.

    See Also