Page Transitions

Question

I have a problem with transitions at the moment using http://www.codeproject.com/KB/WPF/WpfPageTransitions.aspx

The problem is that if I have a button on UserControl1 and when the button is pressed, it triggers UserControl2 to transition, but when this happens, the background of UserControl2 is visible but the other things like text and buttons are merged together with UserControl1 .

How can I either apply a transition to UserControl1 so that only UserControl2 is shown?

Modified code:

NewPage.xml

private void button1_Click(object sender, RoutedEventArgs e)
{
    Test test = new Test();
    pageTransitionControl.SetPreviousUserControl(newPage);
    pageTransitionControl.ShowPage(test);
}

PageTransition.xaml.cs

public partial class PageTransition : UserControl
{
    private UserControl currentUserControl;
    private UserControl previousUserControl;

    public static readonly DependencyProperty TransitionTypeProperty = DependencyProperty.Register("TransitionType",
        typeof(PageTransitionType),
        typeof(PageTransition), new PropertyMetadata(PageTransitionType.SlideAndFade));

    public PageTransitionType TransitionType
    {
        get
        {
            return (PageTransitionType)GetValue(TransitionTypeProperty);
        }
        set
        {
            SetValue(TransitionTypeProperty, value);
        }
    }

    public PageTransition()
    {
        InitializeComponent();
    }

    public void ShowPage(UserControl newPage)
    {
        currentUserControl = newPage;

        if (contentPresenter.Content != null)
        {
            UserControl oldPage = contentPresenter.Content as UserControl;
            oldPage.Loaded -= newPage_Loaded;
            UnloadPage(oldPage);
        }
        else
        {
            ShowNextPage();
        }
    }

    void ShowNextPage()
    {            
        currentUserControl.Loaded += newPage_Loaded;

        contentPresenter.Content = currentUserControl;

        if (currentUserControl != null)
        {
            currentUserControl.Visibility = Visibility.Visible;
            Panel.SetZIndex(currentUserControl, 100);
        }

        if (previousUserControl != null)
        {
            previousUserControl.Visibility = Visibility.Visible;
            Panel.SetZIndex(previousUserControl, 0);      
        }
    }

    void UnloadPage(UserControl page)
    {
        Storyboard hidePage = (Resources[string.Format("{0}Out", TransitionType.ToString())] as Storyboard).Clone();

        hidePage.Completed += hidePage_Completed;

        hidePage.Begin(contentPresenter);
    }

    void newPage_Loaded(object sender, RoutedEventArgs e)
    {
        Storyboard showNewPage = Resources[string.Format("{0}In", TransitionType.ToString())] as Storyboard;

        showNewPage.Begin(contentPresenter);

        currentUserControl = sender as UserControl;
    }

    void hidePage_Completed(object sender, EventArgs e)
    {
        contentPresenter.Content = null;

        ShowNextPage();
    }

    public void SetPreviousUserControl(UserControl userControl)
    {
        previousUserControl = userControl;
    }
}

Answer 1

To achieve this do the following:

1. Keep a Global reference to the Current and Previous UserControls
2. Get your transition as normal but ad a completed event to the DoubleAnimation
3. Make the Current UserControl Visible and set the ZIndex higher than the Previous UserControl
4. Make the Previous UserControl Visivle ans set the ZIndex lover than the Current UserControl
5. Start the animation
6. Set the Visual Brush to the Previous UserControl
7. Remove the effect from the Current UserControl
8. Now when the animations finished
9. Set the ZIndex of the Current UserControl to what you set the Previous UserControl
10. Set the Previous UserControl to Visible
11. Set the Previous UserControl to the Current UserControl

This is MY modified version of this transition library so you may have to tweak it to your needs

Globals

    private UserControl CurrentUserControl;
    private UserControl PreviousUserControl;
    private Random Random;

Methods

    private void TransitionEffectStarting(UserControl userControl)
    {
        CurrentUserControl = userControl;

        TransitionEffect[] effectGroup = Global.TransitionEffects[Random.Next(Global.TransitionEffects.Length)];
        TransitionEffect effect = effectGroup[Random.Next(effectGroup.Length)];

        RandomizedTransitionEffect randomEffect = effect as RandomizedTransitionEffect;
        if (randomEffect != null)
            randomEffect.RandomSeed = Random.NextDouble();

        DoubleAnimation animation = new DoubleAnimation(0.0, 1.0, new Duration(TimeSpan.FromSeconds(1.0)), FillBehavior.HoldEnd);
        animation.AccelerationRatio = 0.5;
        animation.DecelerationRatio = 0.5;
        animation.Completed += TransitionEffectCompleted;

        if (CurrentUserControl != null)
        {
            CurrentUserControl.Visibility = Visibility.Visible;
            Panel.SetZIndex(CurrentUserControl, 1);
        }

        if (PreviousUserControl != null)
        {
            PreviousUserControl.Visibility = Visibility.Visible;
            Panel.SetZIndex(PreviousUserControl, 0);
        }

        else
            Visibility = Visibility.Visible;

        effect.BeginAnimation(TransitionEffect.ProgressProperty, animation);

        if (PreviousUserControl != null)
        {
            VisualBrush visualBrush = new VisualBrush(PreviousUserControl);
            visualBrush.Viewbox = new Rect(0, 0, PreviousUserControl.ActualWidth, PreviousUserControl.ActualHeight);
            visualBrush.ViewboxUnits = BrushMappingMode.Absolute;
            effect.OldImage = visualBrush;
        }

        if (CurrentUserControl != null)
            CurrentUserControl.Effect = effect;
    }

    private void TransitionEffectCompleted(object sender, EventArgs e)
    {
        if (CurrentUserControl != null)
        {
            Panel.SetZIndex(CurrentUserControl, 0);
            CurrentUserControl.Effect = null;

            if (PreviousUserControl != null)
                PreviousUserControl.Visibility = Visibility.Hidden;
        }
        PreviousUserControl = CurrentUserControl;
    }

Hope this helps you out. Let me know if you have any questions.