Page Animation in a WPF Application

14 posts, 1 answers
  1. EMRE ANDIC
    EMRE ANDIC avatar
    13 posts
    Member since:
    Jan 2010

    Posted 22 Apr 2010 Link to this post

    Hi,
    I want to learn how can i create page animation for a wpf applicattion like your RadControls for WPF Demos Application. As you know, it has left TreeView Menu with icons, and when you click a TreeView item, pages are sliding to left, and dissappearing.
  2. Answer
    Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 28 Apr 2010 Link to this post

    Hello EMRE ANDIC,

    Find the attached animation.

    Kind regards,
    Kaloyan
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for WPF is Visual Studio 2017 Ready
  4. EMRE ANDIC
    EMRE ANDIC avatar
    13 posts
    Member since:
    Jan 2010

    Posted 28 Apr 2010 Link to this post

    Thank you so much.
  5. Anthony
    Anthony avatar
    1 posts
    Member since:
    Nov 2008

    Posted 15 Jun 2011 Link to this post

    Nice example, how can i change animation direction to Right -> Left?
  6. Kevin White
    Kevin White avatar
    60 posts
    Member since:
    Jun 2004

    Posted 24 Feb 2012 Link to this post

    Kaloyan,

    I am using your example for a little WPF project I am writing, but I would also like to know how to make the animation slide out to the right.  I am a storyboard newbie and any help you can provide is appreciated.

    Kevin
  7. Albert
    Albert avatar
    5 posts
    Member since:
    Feb 2012

    Posted 25 Feb 2012 Link to this post

               public void BeginRight(FrameworkElement mockItem, Grid container, FrameworkElement newPage)
            {
                Container = container;
                PageWidth = container.ActualWidth;
                item1 = mockItem;
                item2 = newPage;
     
                Container.Children.Add(item1);
     
                var width = PageWidth;
     
                var scaleFactor = 1.0;
                var halfSrink = (1.0 - scaleFactor) / 2;
                 
                var spacing = 15.0;
     
                animation = item1
                    .Animate()
                        .EnsureDefaultTransforms()
                        .MoveX(0.0, 0, 1.5, -(width * (scaleFactor - halfSrink)) - spacing, 1.9, -(width * scaleFactor) - spacing)
                    .Animate(item2)
                        .EnsureDefaultTransforms()
                        .MoveX(0.0, ((scaleFactor + halfSrink) * width) + spacing, 0.2, ((scaleFactor + halfSrink) * width) + spacing, 0.0, ((scaleFactor - halfSrink) * width) + spacing, 1.5, 0)
                    .Instance;
     
                animation.SpeedRatio = 755.0 / width * 5;
     
                IsRunning = true;
     
                animation.Completed += OnCompleted;
     
                animation.Begin();
            }
     
            public void BeginLeft(FrameworkElement mockItem, Grid container, FrameworkElement newPage)
            {
                Container = container;
                PageWidth = container.ActualWidth;
                item1 = mockItem;
                item2 = newPage;
     
                Container.Children.Add(item1);
     
                var width = PageWidth;
     
                var scaleFactor = 1.0;
                var halfSrink = (1.0 - scaleFactor) / 2;
     
                var spacing = 15.0;
     
                animation = item1
                    .Animate()
                        .EnsureDefaultTransforms()
                        .MoveX(0.0, 0, 1.5, (width * (scaleFactor - halfSrink)) + spacing, 1.9, (width * scaleFactor) + spacing)
                    .Animate(item2)
                        .EnsureDefaultTransforms()
                        .MoveX(0.0, -((scaleFactor + halfSrink) * width) - spacing, 0.2, -((scaleFactor + halfSrink) * width) - spacing, 0.0, -((scaleFactor - halfSrink) * width) - spacing, 1.5, 0)
                    .Instance;
     
                animation.SpeedRatio = 755.0 / width * 5;
     
                IsRunning = true;
     
                animation.Completed += OnCompleted;
     
                animation.Begin();
            }
  8. Kevin White
    Kevin White avatar
    60 posts
    Member since:
    Jun 2004

    Posted 27 Feb 2012 Link to this post

    Thanks Albert
  9. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 18 May 2012 Link to this post

    hi,

    is it possible to make the animation faster?

    thanks
    rene
  10. Kevin White
    Kevin White avatar
    60 posts
    Member since:
    Jun 2004

    Posted 18 May 2012 Link to this post


    In the beginleft and beginright methods change the speed ratio value from 

        animation.SpeedRatio = 755.0 / width * 5;

    to
    animation.SpeedRatio = 755.0 / width * 10;

    the higher the value constant value at the end, the faster the animation
  11. Marvin
    Marvin avatar
    2 posts
    Member since:
    May 2012

    Posted 28 May 2012 Link to this post

    Thank you for your snippet, I'm a newbie and I've made much progress with it for a single day. I'm stuck however in the navigation. Unlike in your example, my links are within the page content so changing frame source is giving me a terrible headache. Please point me to the right direction.

    Thanks in advace
  12. Kevin White
    Kevin White avatar
    60 posts
    Member since:
    Jun 2004

    Posted 29 May 2012 Link to this post

    What i did wth mine is (using the MVVM light toolkit) register a message listener on the main window.  All content in the frame doesnt actually do the navigation but rather sends a request to navigate to a page and specifies the direction.   You could also have a common base class for all your content and have it expose an event that the main window could monitor, or perhaps put in the constructor of your base class a required parameter of the frame so you can control the navigation from the content.
  13. Marvin
    Marvin avatar
    2 posts
    Member since:
    May 2012

    Posted 29 May 2012 Link to this post

    thanks for getting back. being a newbie to WPF, C# development, I have very little clues on how to proceed. would you be kind enough to write a minor snippet based on the example posted? I will be really thankful for this
  14. Huas
    Huas avatar
    4 posts
    Member since:
    Oct 2012

    Posted 29 Oct 2012 Link to this post

    I'm looking through the example annimation that's included in the project that Kaloyan provided. Although Albert did provide sample code for animation of BeginLeft/BeginRight, I want the same animation and effect as provided in the project just opposite direction. I believe the one provided in the project is from Right to Left. Can anyone advise on this?

    public void Begin(FrameworkElement mockItem1, Grid container, FrameworkElement newPage)
      {
       this.Container = container;
       this.PageWidth = container.ActualWidth;
       this.item1 = mockItem1;
       this.item2 = newPage;

       this.Container.Children.Add(this.item1);

       var width = PageWidth;

       var scaleFactor = 0.8;
       var halfSrink = (1.0 - scaleFactor) / 2;

       this.Container.Children.Add(this.mask1);
       this.Container.Children.Add(this.mask2);

       var scaleDownSpline = new Spline(0.504000008106232, 0.256000012159348, 0.458999991416931, 1);
       var moveSpline = new Spline(0.247999995946884, 0, 1, 1);
       var scaleUpSpline = new Spline(0.321000009775162, 0, 0.45100000500679, 1);
       var spacing = 15.0;

       this.animation = this.item1
        .Animate()
        .With(this.mask1)
         .EnsureDefaultTransforms()
         .Origin(0, 0.5)
         .Scale(0, 1, 0.2, 1, 0.7, scaleFactor)
          .Splines(2, scaleDownSpline)
         .MoveX(0.7, 0, 1.365, (-width * (scaleFactor - halfSrink)) - spacing, 1.9, (-width * scaleFactor) - spacing)
          .Splines(1, moveSpline)
          .Splines(2, scaleUpSpline)
        .Without(this.item1)
         .Opacity(0, 0, 0.2, 0, 0.7, 1)
          .Splines(1, scaleDownSpline)
        .Animate(this.mask2)
         .Opacity(1.35, 1, 1.9, 0)
          .Splines(scaleUpSpline)
        .With(this.item2)
         .EnsureDefaultTransforms()
         .Origin(0.5, 0.5)
         .Scale(0, scaleFactor, 1.365, scaleFactor, 1.9, 1)
          .Splines(1, moveSpline)
          .Splines(2, scaleUpSpline)
         .MoveX(0.0, ((scaleFactor + halfSrink) * width) + spacing, 0.2, ((scaleFactor + halfSrink) * width) + spacing, 0.7, ((scaleFactor - halfSrink) * width) + spacing, 1.365, 0)
          .Splines(2, scaleDownSpline)
          .Splines(3, moveSpline)
        .Instance;

       this.animation.SpeedRatio = 755.0 / width * 1.5;

       this.isRunning = true;

       this.animation.Completed += (sender, e) =>
       {
                    this.TransitionAnimationCompleted(this, new TransitionEventArgs(item2));

        Container.Children.Remove(mask1);
        Container.Children.Remove(mask2);
        RemoveVisualBrush();
        Container.Children.Remove(item1);
        item1 = null;
        item2 = null;
       };

       this.animation.Begin();
      }




  15. Huas
    Huas avatar
    4 posts
    Member since:
    Oct 2012

    Posted 30 Oct 2012 Link to this post

    Any update on this? I'm new to WPF and Animation.
Back to Top
UI for WPF is Visual Studio 2017 Ready