So let's say I have in a Xamarin.Forms app, a MainPage with following layout:
+------------------------------+
| |
| +-------+ +-------+ |
| | | | | |
| |Button1| |Button2| |
| | | | | |
| +-------+ +-------+ |
| |
+------------------------------+
and now after the user taps on Button1 I want the page to transition to following layout:
+------------------------------+
|---+ |
||B1| +-------+ +-------+ |
+---+ | | | | |
| |Button3| |Button4| |
+---+ | | | | |
||B2| +-------+ +-------+ |
|---+ |
+------------------------------+
The tricky part is, that I want a nice animated transition where:
- Buttons 3 and 4 are sliding from the far right
- Buttons 1 and 2 are moving and scaling with ease to their target position on the left.
Is there any way to implement such behavior in xamarin.forms xaml?
The only approach that I can think of right now, is to use an AbsoluteLayout and set absolute values in pixels for the button initial positions (or their containers). And to do the transition by calling for each element TranslateTo and ScaleTo methods with proper parameters to set the target layout.
But if I want to have more layouts and transition between them, and support more screen resolutions I guess that approach can quickly become hardly maintainable.
If I would have those layouts on separate pages, and make such custom transition between pages, I guess then it becomes even harder, if possible at all.
Any tips how to approach this?
