How to: Animate Series Templates

• Jun 07, 2019
• 2 minutes to read

This example demonstrates how to animate series that are populated using series templates.

View Example

MainWindow.xaml

<Window x:Class="WpfChartSeriesTemplateBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:local="clr-namespace:WpfChartSeriesTemplateBinding"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="414*" />
        </Grid.ColumnDefinitions>
        <dxc:ChartControl x:Name="chartControl1" Margin="18,50.4,14,1" 
                         AnimationMode="OnLoad" Grid.ColumnSpan="2">
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D SeriesDataMember="Series">
                    <dxc:XYDiagram2D.SeriesTemplate>
                        <dxc:AreaSeries2D ArgumentScaleType="DateTime"
                                          ArgumentDataMember="Argument" 
                                          ValueDataMember="Value" 
                                          Transparency="0.7" MarkerVisible="False">
                            <dxc:AreaSeries2D.SeriesAnimation>
                                <dxc:Area2DUnwindAnimation/>
                            </dxc:AreaSeries2D.SeriesAnimation>
                            <dxc:AreaSeries2D.Label>
                                <dxc:SeriesLabel Visible="False">
                                </dxc:SeriesLabel>
                            </dxc:AreaSeries2D.Label>
                        </dxc:AreaSeries2D>
                    </dxc:XYDiagram2D.SeriesTemplate>
                    <dxc:XYDiagram2D.AxisX>
                        <dxc:AxisX2D>
                            <dxc:AxisX2D.Range>
                                <dxc:AxisRange SideMarginsEnabled="False" />
                            </dxc:AxisX2D.Range>
                        </dxc:AxisX2D>
                    </dxc:XYDiagram2D.AxisX>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
            <dxc:ChartControl.Legend>
                <dxc:Legend HorizontalPosition="RightOutside" />
            </dxc:ChartControl.Legend>
        </dxc:ChartControl>
        <Button Name="button1" Content="Create Series..." 
                Width="246" Height="23" Margin="130,12,0,0"
                HorizontalAlignment="Left" VerticalAlignment="Top" 
                Click="button1_Click" Grid.Column="1" />
    </Grid>
</Window>

Application.xaml

<Application x:Class="WpfChartSeriesTemplateBinding.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Application.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace WpfChartSeriesTemplateBinding
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

MainWindow.xaml.vb

Imports System
Imports System.Data
Imports System.Windows
' ...

Namespace WpfChartSeriesTemplateBinding
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
        Private Sub button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            Dim dt As New DataTable("MyDataTable")

            dt.Columns.Add("Series", GetType(String))
            dt.Columns.Add("Argument", GetType(Date))
            dt.Columns.Add("Value", GetType(Double))

            dt.Rows.Add(New Object() { "A", Date.Today, 103 })
            dt.Rows.Add(New Object() { "B", Date.Today, 200 })
            dt.Rows.Add(New Object() { "C", Date.Today, 446 })
            dt.Rows.Add(New Object() { "A", Date.Today.AddDays(1), 788 })
            dt.Rows.Add(New Object() { "B", Date.Today.AddDays(1), 787 })
            dt.Rows.Add(New Object() { "C", Date.Today.AddDays(1), 452 })
            dt.Rows.Add(New Object() { "A", Date.Today.AddDays(2), 152 })
            dt.Rows.Add(New Object() { "B", Date.Today.AddDays(2), 565 })
            dt.Rows.Add(New Object() { "C", Date.Today.AddDays(2), 612 })

            chartControl1.DataSource = dt
        End Sub
    End Class
End Namespace

MainWindow.xaml.cs

using System;
using System.Data;
using System.Windows;
// ...

namespace WpfChartSeriesTemplateBinding {
    public partial class MainWindow : Window {
        public MainWindow () {
            InitializeComponent();
        }
        void button1_Click (object sender, RoutedEventArgs e) {
            DataTable dt = new DataTable("MyDataTable");

            dt.Columns.Add("Series", typeof(string));
            dt.Columns.Add("Argument", typeof(DateTime));
            dt.Columns.Add("Value", typeof(double));

            dt.Rows.Add(new object[] { "A", DateTime.Today, 103 });
            dt.Rows.Add(new object[] { "B", DateTime.Today, 200 });
            dt.Rows.Add(new object[] { "C", DateTime.Today, 446 });
            dt.Rows.Add(new object[] { "A", DateTime.Today.AddDays(1), 788 });
            dt.Rows.Add(new object[] { "B", DateTime.Today.AddDays(1), 787 });
            dt.Rows.Add(new object[] { "C", DateTime.Today.AddDays(1), 452 });
            dt.Rows.Add(new object[] { "A", DateTime.Today.AddDays(2), 152 });
            dt.Rows.Add(new object[] { "B", DateTime.Today.AddDays(2), 565 });
            dt.Rows.Add(new object[] { "C", DateTime.Today.AddDays(2), 612 });

            chartControl1.DataSource = dt;
        }
    }
}