Как вы делаете эффекты перехода, используя элемент управления Frame в WPF? - PullRequest
Новая
       17

Как вы делаете эффекты перехода, используя элемент управления Frame в WPF?

16 голосов
/ 25 января 2010

Я думал, что это будет легко, но, наверное, нет.

У меня есть 2 страницы, которые загружаются в мой кадр управления. Я хочу иметь возможность либо иметь приятный эффект слайда с одной страницы на другую или просто эффект постепенного появления.

Не могу найти это где-нибудь в интернете.

Обновление 1 Принятый ответ хорош, но я нашел еще лучший здесь. http://www.japf.fr/2008/07/8/comment-page-1/

Обновление 2 Если вы можете в это поверить, я нашел еще лучшее решение.
http://fluidkit.codeplex.com/

Ответы [ 3 ]

19 голосов
/ 26 января 2010

Здесь обсуждается похожая проблема: Анимация постепенного исчезновения при переходе на страницу Используя описанную там технику, вы можете перемещать / перемещать элемент управления фреймом при каждой навигации по новой странице. Что-то вроде этого:

XAML: 

...
<Frame Name = "frame" Navigating="frame_Navigating">
...

код: 

...
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);
        });
}
...

надеюсь, это поможет, с уважением

8 голосов
/ 10 апреля 2017

Мой ответ - улучшенная версия ответа от serge_gebunko.
Это дает вам Сдвиг влево и вправо .

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);
            }
1 голос
/ 26 января 2010

Возможно, это не лучший ответ, но он может быть полезен для вас или, по крайней мере, дать вам некоторые идеи. В Silverlight я достиг такого эффекта скользящего перехода между страницами с помощью TransitioningContentControl из Silverlight Toolkit . Это элемент управления контентом, который в основном позволяет определить пользовательскую раскадровку в визуальном состоянии для перехода между старым и новым контентом при каждом изменении контента. Он также включает в себя некоторые переходы по умолчанию (исчезновение / вверх / вниз), если вы не хотите тратить время на определение собственной раскадровки.

Я понимаю, что вы работаете с WPF и что TransitioningContentControl недоступен ни в WPF, ни в WPF Toolkit. Тем не менее, может быть не слишком сложно перенести этот контроль на WPF или, по крайней мере, создать тот, который делает что-то подобное. Если взглянуть на источник, кажется, что это возможно, если у вас есть время, и этот тип управления вы можете использовать в других местах.

Исходный код находится здесь для версии Silverlight, а у Джесси Либерти есть хороший учебник , в котором используется элемент управления в Silverlight.

...