How to: Animate a 3D Chart Series

• Jun 07, 2019

This example shows how to animate series in a 3D chart.

To do this, it is necessary to add a trigger to the series Triggers collection, which will start the series animation in response to the chart’s Loaded event.

View Example

MainWindow.xaml

<Window x:Class="Animate3DSeries.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"
        Title="MainWindow" Height="350" Width="525" >
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram3D>
                    <dxc:XYDiagram3D.Series>
                        <dxc:BarSeries3D   BarWidth="0.01" x:Name="Year1998">
                            <dxc:Series.Points>
                                <dxc:SeriesPoint Argument="Illinois" Value="423.72" />
                                <dxc:SeriesPoint Argument="Indiana" Value="178.71" />
                                <dxc:SeriesPoint Argument="Michigan" Value="308.84" />
                                <dxc:SeriesPoint Argument="Ohio" Value="348.54" />
                                <dxc:SeriesPoint Argument="Wisconsin" Value="160.27" />
                            </dxc:Series.Points>
                            <dxc:BarSeries3D.Triggers>
                                <EventTrigger RoutedEvent="dxc:ChartControl.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="0" To="0.7" Duration="0:0:3"
                                    Storyboard.TargetName="Year1998" 
                                    Storyboard.TargetProperty="BarWidth" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </dxc:BarSeries3D.Triggers>
                        </dxc:BarSeries3D>
                        <dxc:BarSeries3D  BarWidth="0.01" x:Name="Year2001">
                            <dxc:Series.Points>
                                <dxc:SeriesPoint Argument="Illinois" Value="476.85" />
                                <dxc:SeriesPoint Argument="Indiana" Value="195.75" />
                                <dxc:SeriesPoint Argument="Michigan" Value="335.79" />
                                <dxc:SeriesPoint Argument="Ohio" Value="374.76" />
                                <dxc:SeriesPoint Argument="Wisconsin" Value="182.36" />
                            </dxc:Series.Points>
                            <dxc:BarSeries3D.Triggers>
                                <EventTrigger RoutedEvent="dxc:ChartControl.Loaded">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation From="0.01" To="0.7" Duration="0:0:3"
                                    Storyboard.TargetName="Year2001" 
                                    Storyboard.TargetProperty="BarWidth" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </dxc:BarSeries3D.Triggers>
                        </dxc:BarSeries3D>
                    </dxc:XYDiagram3D.Series>
                </dxc:XYDiagram3D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>