DXChartsAnimateSeriesPoints

WPF Charts – How to Animate Series PointsDesigned from the ground up, the DXCharts Control takes full advantage of the visual enhancements provided by the Windows Presentation Foundation. You can easily apply custom shapes and custom animations to nearly every object in the chart.In this video, you’ll learn how to animate the series points of a 3D Bar Series.So let’s get started…1.I’ll start with a WPF application that has a Chart Control dropped onto it.2.For this lesson, we’ll spend most of our time in the XAML Editor.3.I switch to the XAML Editor.4.I select the ChartControl tag and use a Refactor Pro feature to create an end tag for it.5.I’ll create a new ChartControl.Diagram and inside it specify the diagram type.6.For this demo, I’ll use a XYDiagram3D so that the chart has a full 3D look.7.For the purposes of this lesson, I’m going to specify a range of values for the X axis of the chart.8.To do this, I create an Axis3D.Range element and insid e it I’ll use the MinValue and MaxValueproperties of AxisRange to define the range of values to be used on the X-Axis of the chart.9.Next, I need to create a new series for the chart.10.I’ll specify the series type to be a BarSeries3D.11.I set its ArgumentScaleType property to Numerical and the ColorEach property to True.12.Inside the BarSeries3D tags, I create a new Points collection.13.I’ll create two SeriesPoints.14.The first one, I’ll set its Name property to “point1” so that it can be accessed using theAnimationRecords that we will create later on.15.For this example, the Argument property is set to ‘1’ and the Value property to ‘10’.16.I’ll repeat the same steps for the second point, except call it “point2” and assign different valuesfor its Argument and Value properties.17.Finally, to prevent the series labels from displaying on the chart, I’ll set the Visible property ofthe SeriesLabel element to False.18.Now I’m going to create a set of AnimationRecords.19.I’ll give the ChartAnimationRecord a name so that it can be used in a storyboard which I’llcreate later.20.Inside it, I’ll create two SeriesPointAnimation elements, one to slide the bar horizontally basedon the specified argument value, and one to fill the bar vertically to reach the point’s specified value.21.The XAML code for performing the actual animation is now complete.22.However, the chart control will not animate anything as it is not instructed to do so at runtime.23.For this demo, I want the animation to start as soon as the chart control is loaded.24.To do this, I create a ChartControl.Triggers collection.25.Here, I’ll specify the EventTrigger to be the Loaded Event of the ChartControl.26.I do this by setting its RoutedEvent property.27.I start a new Storyboard and inside it specify the animation to be run.28.For this, I’m setting the Storyboard.TargetName property to “seriesAnimation.”29.And that’s it!30.I run the application to see the results.31.You can see that as soon as the application is loaded, the 3D bars are animated in the mannerthat we specified in the code earlier.While this is a very simple example, you can go more in-depth to create stunning and professional-looking animated charts for use in your applications.Thanks for watching and thank you for choosing DevExpress!Code [XAML]<dxc:ChartControl Margin="0" Name="chartControl1"><dxc:ChartControl.Triggers><EventTrigger RoutedEvent="dxc:ChartControl.Loaded"><BeginStoryboard HandoffBehavior="Compose"><Storyboard><DoubleAnimation Storyboard.TargetName="seriesAnimation"Storyboard.TargetProperty="Progress"From="0" To="1" Duration="0:0:5" /></Storyboard></BeginStoryboard></EventTrigger></dxc:ChartControl.Triggers><dxc:ChartControl.AnimationRecords><dxc:ChartAnimationRecord x:Name="seriesAnimation"><dxc:ChartAnimationRecord.Animations><dxc:SeriesPointAnimation TargetSeriesPoint="{BindingElementName=point1}"> <dxc:SeriesPointAnimation.Actions><dxc:SeriesPointNumericalArgumentActionNumericalArgument="4" /></dxc:SeriesPointAnimation.Actions></dxc:SeriesPointAnimation><dxc:SeriesPointAnimation TargetSeriesPoint="{BindingElementName=point2}"> <dxc:SeriesPointAnimation.Actions><dxc:SeriesPointNumericalValueActionNumericalValue="10" /></dxc:SeriesPointAnimation.Actions></dxc:SeriesPointAnimation></dxc:ChartAnimationRecord.Animations></dxc:ChartAnimationRecord></dxc:ChartControl.AnimationRecords><dxc:ChartControl.Diagram><dxc:XYDiagram3D><dxc:XYDiagram3D.AxisX><dxc:AxisX3D><dxc:AxisX3D.Range><dxc:AxisRange MinValue="0.5" MaxValue="5.5" /></dxc:AxisX3D.Range></dxc:AxisX3D></dxc:XYDiagram3D.AxisX><dxc:XYDiagram3D.Series><dxc:BarSeries3D ArgumentScaleType="Numerical" ColorEach="True"><dxc:BarSeries3D.Points><dxc:SeriesPoint x:Name="point1" Argument="1" Value="10" /><dxc:SeriesPoint x:Name="point2" Argument="5" Value="1" /> </dxc:BarSeries3D.Points><dxc:bel><dxc:SeriesLabel Visible="False" /></dxc:bel></dxc:BarSeries3D></dxc:XYDiagram3D.Series></dxc:XYDiagram3D></dxc:ChartControl.Diagram></dxc:ChartControl>。