How to replace current control in Silverlight/WP7 with a transition?

Question

I have a Wp7 that has two controls. One is a map, and the other is a panorama control. In one of the panorama items is a list of values. If a user clicks on a list item, I'd like to show a turnstile transition to a new control that shows more detail.

So far in XAML, I have an event bound to LeftMouseUp, and it triggers. However I'm now sure how to replace the current panoramaitem with a new control (view), or how to use a the TurnstileTransition provided by the silverlight toolkit, between the two.

TurnstileTransition transitionElement = 
  new TurnstileTransition { Mode = TurnstileTransitionMode.ForwardIn };

AlertDetailedView view = new AlertDetailedView();

view.DataContext = (e.OriginalSource as FrameworkElement).DataContext;

//this stuff below sorta doesnt really work...
ITransition transition = transitionElement.GetTransition(this);

transition.Completed += delegate
{
   transition.Stop();

};
transition.Begin();

Stuart Stuart · Accepted Answer · 2011-03-07T08:04:13

In order to fit in with WP7 Navigation (e.g. the Back Button) then I'd recommend that you use two different pages for the two controls.

For seeing how to animate page transitions, then the SL toolkit contains some helpful material - or Kevin Marshall's blog is also very helpful - e.g. http://blogs.claritycon.com/kevinmarshall/2010/05/12/windows-phone-7-prototype-002-animated-page-transitions-writeable-bitmaps/

How to replace current control in Silverlight/WP7 with a transition?

1 Answers