How to: Animate a 3D Chart Diagram

• Jun 07, 2019

This example shows how to provide rotation and zooming animation actions for a 3D Diagram.

See the Animation section for more information.

MainWindow.xaml

<Window x:Class="DiagramAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="400" Width="400" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts">
    <Grid>
        <dxc:ChartControl>
            <!--region #records-->
            <dxc:ChartControl.AnimationRecords>
                <dxc:ChartAnimationRecord x:Name="Year1998" Progress="0">
                    <dxc:ChartAnimationRecord.Animations>
                        <dxc:Diagram3DAnimation InitialZoomPercent="20" >
                            <!--region #rotation-->
                            <dxc:Diagram3DAnimation.InitialRotation>
                                <dxc:AnimationRotation AngleX="27" AngleY="27" AngleZ="27" Order="ZXY"/>
                            </dxc:Diagram3DAnimation.InitialRotation>
                            <dxc:Diagram3DAnimation.Actions>
                                <dxc:Diagram3DRotationAction>
                                    <dxc:Diagram3DRotationAction.Rotation>
                                        <dxc:AnimationRotation AngleX="-40" AngleY="-40" Order="YZX"/>
                                    </dxc:Diagram3DRotationAction.Rotation>
                                </dxc:Diagram3DRotationAction>
                                <!--endregion #rotation-->

                                <!--region #zooming-->
                                <dxc:Diagram3DZoomAction  FinalZoomPercent="100" />
                                <!--endregion #zooming-->
                            </dxc:Diagram3DAnimation.Actions>
                        </dxc:Diagram3DAnimation>
                    </dxc:ChartAnimationRecord.Animations>
                </dxc:ChartAnimationRecord>
            </dxc:ChartControl.AnimationRecords>
            <!--endregion #records-->
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram3D>
                    <dxc:XYDiagram3D.Series>
                        <dxc:BarSeries3D >
                            <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>
                    </dxc:XYDiagram3D.Series>
                </dxc:XYDiagram3D>
            </dxc:ChartControl.Diagram>
            <!--region #triggers-->
            <dxc:ChartControl.Triggers>
                <EventTrigger RoutedEvent="dxc:ChartControl.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation From="0.1" To="1" Duration="0:0:3"
                                    Storyboard.TargetName="Year1998" 
                                    Storyboard.TargetProperty="Progress" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </dxc:ChartControl.Triggers>
            <!--endregion #triggers-->
        </dxc:ChartControl>
    </Grid>
</Window>