How to grow an image gradually (from nothing) in WPF

Question

So, I'm developing an application in WPF with C#, and I would like to gradually grow a image control (using a DoubleAnimation). I ran it, but my image never appeared. Here is my code:

PACSCore.Height = 0; //Sets Image Size before enlarging
PACSCore.Width = 0;
DoubleAnimation anim = new DoubleAnimation(1, 0, (Duration)TimeSpan.FromSeconds(0.4)); //Creates DoubleAnimation
ScaleTransform st = new ScaleTransform(); //Creates ScaleTransform
st.ScaleX = 1; //Sets Scale for X and Y
st.ScaleY = 1;
PACSCore.RenderTransform = st;
st.BeginAnimation(ScaleTransform.ScaleXProperty, anim);
st.BeginAnimation(ScaleTransform.ScaleYProperty, anim);

https://msdn.microsoft.com/fr-fr/library/system.windows.media.scaletransform.scalex(v=vs.110).aspx "Values between 0 and 1 decrease the width of the scaled object; values greater than 1 increase the width of the scaled object. A value of 1 indicates that the object is not scaled in the x-direction." — Guillaume Beauvois, Jul 06 '15 at 15:14
@GuillaumeBeauvois So what shall I set it to to achieve the right size? — Luke Dinkler, Jul 06 '15 at 15:30
This is another question, and i don't know, never used it. But one thing is sure, do not set the size of your image at (0,0), at least set it at (1,1). Because scaling from 0 length and width will always be 0. ( ∞ * 0 = 0) — Guillaume Beauvois, Jul 06 '15 at 15:34
Either you initially set the Image control's Width and Height to their desired final value or you don't set them at all. Thus the Image will have it's "natural" size, which is defined by its parent container or by the size of the loaded image. Then you set a ScaleTransform with initial ScaleX and ScaleY values set to 0, and animate them to 1 by `new DoubleAnimation(1, TimeSpan.FromSeconds(0.4))` — Clemens, Jul 06 '15 at 15:52

score 1 · Accepted Answer · answered Jul 06 '15 at 19:55

Thanks to Clemens, I now have the solution and am posting it for everyone else's benefit. I had to initially set the Image Control's size ahead of time and animate the image from 0 to 1 using a DoubleAnimation. Here's my code:

DoubleAnimation anim = new DoubleAnimation(0, 1, (Duration)TimeSpan.FromSeconds(1.2));
ScaleTransform st = new ScaleTransform();
st.ScaleX = 0;
st.ScaleY = 0;      
IMAGE.RenderTransform = st;
st.BeginAnimation(ScaleTransform.ScaleXProperty, anim);
st.BeginAnimation(ScaleTransform.ScaleYProperty, anim);

How to grow an image gradually (from nothing) in WPF

1 Answers1