How to: Animate Series Templates

  • 2 minutes to read

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>