wpf-11199-controls-and-libraries-charts-suite-chart-control-examples-end-user-interaction-how-to-animate-series-templates.md
This example demonstrates how to animate series that are populated using series templates.
<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 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>
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
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
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;
}
}
}