How do you do transition effects using the Frame control in WPF?
There is a similar problem discussed here: Transition Fade Animation When Navigating To Page Using the technique described there you can slide\move your frame control each time a new page is navigated. Smth like this:
xaml:
...<Frame Name = "frame" Navigating="frame_Navigating">...code:
...private bool _allowDirectNavigation = false;private NavigatingCancelEventArgs _navArgs = null;private Duration _duration = new Duration(TimeSpan.FromSeconds(1));private double _oldHeight = 0;private void frame_Navigating(object sender, NavigatingCancelEventArgs e){ if (Content!=null && !_allowDirectNavigation) { e.Cancel = true; _navArgs = e; _oldHeight = frame.ActualHeight; DoubleAnimation animation0 = new DoubleAnimation(); animation0.From = frame.ActualHeight; animation0.To = 0; animation0.Duration = _duration; animation0.Completed += SlideCompleted; frame.BeginAnimation(HeightProperty, animation0); } _allowDirectNavigation = false;}private void SlideCompleted(object sender, EventArgs e){ _allowDirectNavigation = true; switch (_navArgs.NavigationMode) { case NavigationMode.New: if (_navArgs.Uri == null) frame.Navigate(_navArgs.Content); else frame.Navigate(_navArgs.Uri); break; case NavigationMode.Back: frame.GoBack(); break; case NavigationMode.Forward: frame.GoForward(); break; case NavigationMode.Refresh: frame.Refresh(); break; } Dispatcher.BeginInvoke(DispatcherPriority.Loaded, (ThreadStart)delegate() { DoubleAnimation animation0 = new DoubleAnimation(); animation0.From = 0; animation0.To = _oldHeight; animation0.Duration = _duration; frame.BeginAnimation(HeightProperty, animation0); });}...hope this helps, regards
My answer is the improved version of the answer given by serge_gebunko.
It gives you the Sliding left and right effect.
XAML
...<Frame Name = "MainFrame" Navigating="MainFrame_OnNavigating">...C#
private void MainFrame_OnNavigating(object sender, NavigatingCancelEventArgs e) { var ta = new ThicknessAnimation(); ta.Duration = TimeSpan.FromSeconds(0.3); ta.DecelerationRatio = 0.7; ta.To = new Thickness(0 , 0 , 0 , 0); if (e.NavigationMode == NavigationMode.New) { ta.From = new Thickness(500, 0, 0, 0); } else if (e.NavigationMode == NavigationMode.Back) { ta.From = new Thickness(0 , 0 , 500 , 0); } (e.Content as Page).BeginAnimation(MarginProperty , ta); }
This probably isn't the best answer, but it maybe helpful to you or at least give you some ideas. In Silverlight I have achieved that type of sliding transition effect between pages by using the TransitioningContentControl from the Silverlight Toolkit. It is a content control which basically lets you define a custom storyboard in a visual state for a transition between the old and new content whenever the content changes. It also includes some default (fade/up/down) transitions if you don't want to take the time to define a custom storyboard.
I realize that you are working with WPF and that the TransitioningContentControl is not available in WPF or in the WPF Toolkit. However, it may not be too difficult to port this control over to WPF or at least make one that does something similar. Glancing over the source it looks like it may be doable if you have the time and it is the type of control you may reuse in other places.
The source code is here for the Silverlight version and Jesse Liberty has a nice tutorial which walks through using the control in Silverlight.