This topic provides information on enabling the XamDataChart™ controls transition-in animation feature along with a listing of the supported series.
The following topic is a prerequisite to understanding this topic:
This topic contains the following sections:
This feature allows you to animate the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the ColumnSeries animates by rising from the x-axis, a LineSeries animates by drawing from the y-axis.
By default, animated transitions are disabled and you can enable transition-in animations by setting the IsTransitionInEnabled property to "True" .
Animated transitions can be configured in terms of transition type, speed of the individual data points relative to each other, and the easing transition (managed by an easing function).
The following series types support the transition-in animations feature:
Many types of animated transitions are supported based on the nature of the movement and its direction:
FromZero – Series transitions in from the reference value of the value axis.
Accordion-type transitions:
From side:
AccordionFromLeft – Series accordions in from the left.
AccordionFromRight – Series accordions in from the right.
AccordionFromTop – Series accordions in from the top.
AccordionFromBottom – Series accordions in from the bottom.
From an axis:
AccordionFromCategoryAxisMinimum – Series accordions in from the category axis minimum.
AccordionFromCategoryAxisMaximum – Series accordions in from the category axis maximum.
AccordionFromValueAxisMaximum – Series accordions in from the value axis maximum.
AccordionFromValueAxisMinimum – Series accordions in from the value axis minimum.
Expand – Series expands from the value midpoints.
Sweep-type transitions:
From side:
SweepFromLeft – Series sweeps in from the left
SweepFromRight – Series sweeps in from the right
SweepFromTop – Series sweeps in from the top.
SweepFromBottom – Series sweeps in from the bottom.
SweepFromCenter – Series sweeps in from the center.
From an axis:
SweepFromCategoryAxisMaximum – Series sweeps in from the category axis maximum.
SweepFromCategoryAxisMinimum – Series sweeps in from the category axis minimum.
SweepFromValueAxisMaximum – Series sweeps in from the value axis maximum.
SweepFromValueAxisMinimum – Series sweeps in from the value axis minimum.
The transition’s speed type determines the speed of the individual items of the current series’s transition relative to each other as the animated transition is playing. The following are the different speed types:
Auto – Automatically selects a speed type.
IndexScaled – Data points arrive later if their index is further from the axis origin.
Normal – All speeds are normal, data points arrive at the same time.
Random – Data points arrive at random times.
ValueScaled - Data points arrive later if their value is further from the starting point.
The easing function determines what way the animation initially eases in. Apply any easing function. It is set to CubicEase by default.
The transition type is configured by setting the TransitionInMode property to the desired transition name. Automatic selection of the transition type based on the series type is possible, too, by setting the property to "Auto" (default).
The following example demonstrates how to enable transition in animations and have the column series accordion in from the right as a result of the following settings:
Following is the code that implements this example:
In XAML:
<ig:XamDataChart x:Name="Chart" >
<ig:XamDataChart.Series>
<ig:ColumnSeries IsTransitionInEnabled="True"
TransitionInSpeed="IndexSpeed">
<ig:ColumnSeries.TransitionInEasingFunction>
<CubicEase />
</ig:ColumnSeries.TransitionInEasingFunction>
</ig:ColumnSeries>
</ig:XamDataChart.Series>
</ig:XamDataChart>In C#:
var series = new ColumnSeries();
series.IsTransitionInEnabled = true;
series.TransitionInSpeed = TransitionInSpeedType.IndexSpeed;
series.TransitionInEasingFunction = System.Windows.Media.Animation.CubicEase;In Visual Basic:
Dim series As New ColumnSeries()
series.IsTransitionInEnabled = true
series.TransitionInSpeed = TransitionInSpeedType.IndexSpeed
series.TransitionInEasingFunction = System.Windows.Media.Animation.CubicEaseThe following topic provides additional information related to this topic: