I thought this would be easy but I guess not.
I have 2 pages that load in my frame control. I want to be able to either have a nice slide effect from one page to the next or just a simple fade-In effect.
Can't seem to find this anywhere on the internets.
Update 1 The accepted answer is good, but I found an even better one here. http://www.japf.fr/2008/07/8/comment-page-1/
Update 2
If you can believe it I found an even better solution.
http://fluidkit.codeplex.com/
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