I was working on a project where I wanted transitions when a user navigated from one screen to the next. I was familiar with creating animations in Microsoft Expression Blend, so I went ahead and started creating an animation for moving the current screen off to the left, and moving the new screen to center stage from the right. I also needed the reverse of these animations for when the user when from the 2nd screen back to the first. I soon realized that all of the screens in the project would make for a bunch of animations. Since it was a Silverlight project, I couldn't afford to have my XAML markup to get too unwieldy with animations. Since the animation was very basic and similar it could be easily achieved in code. Here is a stripped down version of what I did:
This is a stripped down version of what I really did. I used a formula to determine the shift on the X-axis, and I didn't do any hardcoding (which is almost always a bad idea). In the first chunk I indicated that the animation begin immediately, hence 00:00:00. after that I indicated via a property path which value on the UIElement I was going to be changing in the animation. Thirdly I indicated how long I wanted the animation to take, and what the final value of the property would be when it is all over.
The animation takes over and figures out exactly where the property's value will be at exactly what time between 00:00:00 and when the animation is completed. In other words it linearly interpolates the value of the UIElement's X component. The XAML for my window is as follows:
It is important to note the relationship between the property path used in the code and the StackPanel.RenderTransform XAML seen here. If one is modified, the other one should make sure it matches.
Download this solution and play around with it.
Programming
XAML
Animation
