1

I have an application that is made using WPF, i have multiple pages and a form that contains a frame, and i load the pages on a frame, and each page has back and next buttons.

what i want to do is to animate the navigation of the pages on the frame in a way when i press Next, the current page slides to the left and the following page slides also to the left and replacing the the current page, and when i press back the current page slides to the right and the previous page slides to the right replacing the current page.

how to do that?

ibr
  • 319
  • 1
  • 5
  • 19
  • How about https://stackoverflow.com/questions/2135113/how-do-you-do-transition-effects-using-the-frame-control-in-wpf – Andy Dec 20 '18 at 18:49
  • that answer animates the coming page, but i was looking for solution that animates the coming and the current pages – ibr Jan 06 '19 at 12:55
  • I've not tried it but it looks to me like frame_Navigating animates the current page, SlideCompleted then loads and animates the new page. – Andy Jan 06 '19 at 15:12
  • actually it works, i have tried it, but the problem the animation happens for the target page, i tired to modify it so it animates two pages at once but no luck – ibr Jan 06 '19 at 15:40

2 Answers2

1

I may be proven wrong here but I don't believe WPF exposes a way to implement this easily. There are methods for overriding existing transition animations in UWP.

For WPF you can handle this one of two ways...

  • Start the animation of the page sliding out. When the animation is complete let it fire an event that will then call frame to change pages.

    Have the page offset by default and perform the animation to slide it in to it's original spot.

or....

  • Capture the Navigating event of the frame, monitor NavigationMode, call the animations, make the navigation wait or mark e.Handled == true and recall it after with a flag that says it can continue.

    Do the same for transitioning in.

Here's the problem; you won't have both pages on the screen at the same time and you'll have to write some fancy transitioning code to make all this work correctly. I would go as far as introducing custom controls with interfaces or DependencyProperties that have the transitioning functions embedded etc.

That said; I have had this problem in the past and to be fair I just gave up on the Frame control and pages and did it all manually. In the end it felt faster, easier to maintain, and I was able to achieve any effect I wanted.

So if you want my honest answer just don't use Frame and do it all manually... (This is speaking for WPF only. UWP has other features and more reasons to use the built in navigation than WPF does.)

Michael Puckett II
  • 6,586
  • 5
  • 26
  • 46
  • Thanks for the answer, do you have some sort of a sample that you can share? honestly i don't know how i can load the pages without a frame – ibr Jan 06 '19 at 13:11
  • I'm accepting the answer because after modifying the answer [here](https://stackoverflow.com/questions/2135113/how-do-you-do-transition-effects-using-the-frame-control-in-wpf?answertab=active#tab-top) to slide, still i get one page slides then the other one slides, so i found out that the frame/page method wont serve here because **only the loaded page can be animated**, and i don't think two pages can be animated at once in a frame or a window – ibr Jan 09 '19 at 14:27
1

Well, I believe the simplest solution would be to drop using Frames and implement your own navigation mechanism using something along the lines of the TransitioningContentControl (so you don't have to implement the transitions from scratch).

Basically, you'd have an list of your controls, an TransitionContentControl and two buttons (back and forward). So all you'd have to do is handle the clicks on the buttons and set the Transition accordingly (eg. when back button is pressed set it to Left and load the previous page).

appa yip yip
  • 1,404
  • 1
  • 17
  • 38
  • hi, if i don't use the frame, how can i load the pages? keep in mind i initialize all the pages in the beginning and i keep them alive the whole duration of the app, so without a frame, how to show each page? – ibr Jan 06 '19 at 13:13