SetValue(LeftProperty/TopProperty, value) not acting as I expect

SetValue(LeftProperty/TopProperty, value) not acting as I expect

08-03-2008 11:52 PM |

This will probably be a fairly easy question for everyone else.  I'm brand new to silverlight, LOVE IT so far.  Hoping to convert my Flash stuff.

Anyway, in Silverlight I have a fairly simple app that does gravity simulation, bouncing, object rotation, etc.  There is a floor, walls, ceiling and a ball, and the ball, which is a set of nested canvasses and ellipses, is started with random vertical and horizontal velocity.  I actually had this working as a Silverlight javascript app and thought I would get more out of learning to use the xaml.cs.  After the conversion, the ball stays in one place and does not move; however, when I debug, the logic shows the ball moving and bouncing as expected.  One weird thing, though: I can change the angle in the RenderTransform and it does actually show up on the screen.

I am running a DoubleAnimation Loop (Not really even sure about the differences between animation types, this might be my problem, but it worked in my previous version):

<Storyboard x:Name="timer">
 <DoubleAnimation Storyboard.TargetName="timerTarget" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="1" Duration="0:0:.01666" Completed="timerTick" />
</Storyboard>

And I do start the timeline in the code behind on the Page load function:  this.timer.Begin(); So the timerTick function is definitely being hit.

And the timerTick function does something like this to move the ball... well, at least what I think should move the ball:

Obviously this isn't all the code, but this shows you how I thought I could move the ball.  I'm using this code, because this:

Made it move in javascript.  Am I forgetting to call some method to render the control again and make the movements show up?  That would be strange because this:

Re: SetValue(LeftProperty/TopProperty, value) not acting as I expect

08-04-2008 11:21 AM |

Hrm... I'm beginning to think it's not possible to move an object around using the code behind.  I've even tried using the examples right off of the site:

http://msdn.microsoft.com/en-us/library/cc189069(VS.95).aspx#procedural_code

I really thought the "Creating an Animation in Procedural Code" was going to work.  I guess I'll go back to animating in javascript.

If anyone has any examples they have seen work, and there is downloadable code, I would love to see it.  And I'm still willing to hear ideas on getting the animation working from the code behind. 

I promise I'm not a total idiot... just a n00b to Silverlight :)

Thanks a lot guys/gals!

Re: SetValue(LeftProperty/TopProperty, value) not acting as I expect

08-04-2008 12:00 PM |

In the bottom of Animation Overview (Silverlight 2) article there is a note saying:

Do not attempt to call Storyboard APIs (e.g. Begin) within the constructor of the page. This will cause your animation to silently fail. 

Hope this helps :)

Re: Re: SetValue(LeftProperty/TopProperty, value) not acting as I expect

08-04-2008 5:24 PM |

Yeah, I saw that.  So I moved my Begin() method to the LeftMouseDown handler, but it still didn't animate anything.  And again, the debugger showed the ball bouncing and rotating and having a good old time, but when I switched it back to the scene: nothing! 

Is anyone else having this problem?  Should this be working?  I thought it might be a problem that was computer specific, so I moved the app to another computer and it did the same thing.  So I hosted it and tried it on a couple other computers... still nothing.

I still want to figure this out so if you have any ideas, thoughts, comments, or if you just want me to drop it and go another route.  Please, let me know!  I are a gud lerner.

Re: Re: SetValue(LeftProperty/TopProperty, value) not acting as I expect

08-04-2008 5:46 PM |

I don't have time to run your code and see what is wrong, but just want to let your know all animation you want you can do in SL code behind without problem. I don't know what you mean by moving it to JavaScript.  But if you want to do animation,  read this article first:

 http://dotnetslackers.com/articles/silverlight/AnimationInDepthWithSilverlight20Beta1.aspx

New Mission: Help me move an object from x=10 to x=300 all in the xaml.cs.

08-04-2008 7:18 PM |

Sladapter, thanks for your response.  The site you suggested is a great site to learn how to do storyboards using key frames.  However, what I'm after is setting up something like a game interface.  In a game interface, some objects don't move along a uniform path.  The ball in the application I've built is such an object.  I want to start the timeline, and every time the timer "ticks" then I want to reappraise where the ball should go.  And I would like to do this dynamically in the xaml.cs.

For instance, if you were a Flash buff, you know that if you say:

obj._x = 20;
obj._y = 20;

The obj would move to the 20, 20 position.  And later you could set it to 20, 40, or whatever your heart desires, and you could do this all in the code-behind without having to set up a motion tween.  That's what I'm trying to do here. 

For sake of simplicity, all I want to do is programmatically move an object from one side to the other side in the xaml.cs.  From x=10 to x=300.  If anyone can show me how to successfully do this I can take care of the rest. 

Thanks again for all your help! 

Re: New Mission: Help me move an object from x=10 to x=300 all in the xaml.cs.

08-04-2008 9:04 PM |

 Here is the code to move a control from the current position to a new position within a period time:

 void Move(FrameworkElement control, Point To, Duration duration)
        {
            DoubleAnimation xa = new DoubleAnimation();  //Animation for shrink Width
            xa.Duration = duration;
            xa.To = To.X;   // move to X      

            DoubleAnimation ya = new DoubleAnimation(); //Animation for shrink Height
            ya.Duration = duration;
            ya.To = To.Y;

            Storyboard sb = new Storyboard();
            sb.Duration = duration;
            sb.Children.Add(xa);
            sb.Children.Add(ya);

            Storyboard.SetTarget(xa, control);   //set Animation Target
            Storyboard.SetTargetProperty(xa, new PropertyPath("(Canvas.Left)"));   // set Animation TargetProperty
            Storyboard.SetTarget(ya, control);
            Storyboard.SetTargetProperty(ya, new PropertyPath("(Canvas.Top)"));
            control.Resources.Add("movesb", sb); // Add storyboard
            sb.Begin(); // Start to run the Storyboard
        }

 to move any control, call: 

 Move(yourObject,  new Point(100, 100),  new Duration(TimeSpan.FromSeconds(2)));

Re: New Mission: Help me move an object from x=10 to x=300 all in the xaml.cs.

08-05-2008 12:32 AM |

Awesome. Sladapter, I'll give this a try in the morning and let you know how it turns out.

Thanks!

Re: Re: New Mission: Help me move an object from x=10 to x=300 all in the xaml.cs.

08-06-2008 1:39 AM |

Did not have a lot of time to devote to this today; however, a small experiment yielded negative results.  Will try again as soon as possible ane mark answer if possible.

 Thanks.