Creating Custom Animations | ComponentOne Chart for WPF and Silverlight

Creating Custom Animations

In This Topic

Almost all of the plot elements can be animated with standard WPF animations. The following style is the modified style that adds "running ants" animation to the element which is under the mouse pointer.

XAML	Copy Code
ComponentOne Chart for WPF / Chart Features / Animation Creating Custom Animations Almost all of the plot elements can be animated with standard WPF animations. The following style is the modified style that adds "running ants" animation to the element which is under the mouse pointer. <Style x:Key="mouseOver" TargetType="{x:Type c1c:PlotElement}"> <!-- Default black outline --> <Setter Property="Stroke" Value="Black" /> <Style.Triggers> <!-- When mouse is over element make thick red outline --> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Stroke" Value="Red" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="StrokeDashArray" Value="2,2" /> <Setter Property="Canvas.ZIndex" Value="1" /> <Trigger.EnterActions> <!-- Start animation --> <BeginStoryboard > <Storyboard> <DoubleAnimation Storyboard.TargetProperty="StrokeDashOffset" From="0" To="8" RepeatBehavior="Forever" Duration="0:0:0.5"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> </Style.Triggers> </Style>

XAML

Copy Code

ComponentOne Chart for WPF / Chart Features / Animation
Creating Custom Animations
Almost all of the plot elements can be animated with standard WPF animations. The following style is the modified style that adds "running ants" animation to the element which is under the mouse pointer.

<Style x:Key="mouseOver" TargetType="{x:Type c1c:PlotElement}">
   <!-- Default black outline -->         
   <Setter Property="Stroke" Value="Black" />
   <Style.Triggers>
   <!-- When mouse is over element make thick red outline  -->
          <Trigger Property="IsMouseOver" Value="true">
                 <Setter Property="Stroke" Value="Red" />
                 <Setter Property="StrokeThickness" Value="2" />
                 <Setter Property="StrokeDashArray" Value="2,2" />
                 <Setter Property="Canvas.ZIndex" Value="1" />
                 <Trigger.EnterActions>
                        <!-- Start animation -->
                        <BeginStoryboard >
                               <Storyboard>
                               <DoubleAnimation Storyboard.TargetProperty="StrokeDashOffset"
                               From="0" To="8" RepeatBehavior="Forever" Duration="0:0:0.5"/>
                               </Storyboard>
                        </BeginStoryboard>
                 </Trigger.EnterActions>
          </Trigger>
   </Style.Triggers>
</Style>

Each DataSeries in a chart is composed of PlotElement objects that represent each individual symbol, connector, area, pie slice, etc in the series. The specific type of PlotElement depends on the chart type.

You can add animations to your charts by attaching Storyboard objects to the plot elements. This is usually done in response to the DataSeries.PlotElementLoaded event, which fires after the PlotElement objects have been created and added to the data series.