Search code examples
c#wpfuser-interfaceframe

How do you do transition effects using the Frame control in WPF?


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/


Solution

  • 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