We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Animating diagram

Thread ID:





80801 Apr 28,2009 07:41 AM UTC May 6,2009 06:29 AM UTC WPF 2
Tags: Diagram
Frederic Mory
Asked On April 28, 2009 07:41 AM UTC

Do you have any plan or tricks for current version to animate Wpf Diagrams.

i.e : i made a diagram representing a synoptic of an energy chain for a datacenter. Now, i want to show whats happening in case of failure of a portion of the chain. A cool feature would be to animate the diagram to show energy flow crossing some of my nodes and connectors.

Nikhil A [Syncfusion]
Replied On April 28, 2009 03:46 PM UTC


We can perform all kinds of animations on nodes by applying the storyboard. For the case you have mentioned, in order to show a flow of energy between nodes, you can specify intermediate transparent nodes (dummy nodes) at the desired places where energy flow occurs. Then a double animation can be applied changing the opacity of the nodes from 1 to 0 and 0 to 1 continuously so that the intermediate dummy nodes appear and get hidden in a smooth manner.

From="0.0" To="1.0" Duration="0:0:10" AutoReverse="False" RepeatBehavior="Forever" />

Then put all your dummy nodes in a temporary collection and apply the animation to those nodes.
ObservableCollection nodes = new ObservableCollection();

int x=0;
private void Button_Click_1(object sender, RoutedEventArgs e)
foreach (Node n in nodes)
Storyboard story = this.Resources["myStoryboard1"] as Storyboard;
story.BeginTime = new TimeSpan(0, 0, 0, x+=2, 0);

The above mentioned process is just an example for applying animations to node. The storyboard can be written according to one's needs so that the appropriate animation can be achieved. In a similar way node rotation and translation animations can be achieved.

Sample code for translating node:

DoubleAnimation nodeanimation = new DoubleAnimation();
nodeanimation.From =500;
nodeanimation.To = 0;
nodeanimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));
nodeanimation.RepeatBehavior = new RepeatBehavior(1);

TranslateTransform rt = new TranslateTransform();

nodeObj.RenderTransform = rt;
rt.BeginAnimation(TranslateTransform.XProperty, nodeanimation);

Sample code for rotating node:

DoubleAnimation nodeanimation = new DoubleAnimation();
nodeanimation.From = 0;
nodeanimation.To = 360;
nodeanimation.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));
nodeanimation.RepeatBehavior = new RepeatBehavior(15);

RotateTransform rt = new RotateTransform();

nodeObj.RenderTransform = rt;
nodeObj.RenderTransformOrigin = new Point(.5, .5);
rt.BeginAnimation(RotateTransform.AngleProperty, nodeanimation);

Hope this helps in solving your problem.

Thanks for your interest in Syncfusion products.


Frederic Mory
Replied On May 6, 2009 06:29 AM UTC

Its all so simple, thats a great idea, thank you !


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon