I’ve been brought in to help on a customer app, written in Xamarin Forms. The app is pretty much complete and ready to go live. On the home page, I was asked to add a flyout menu. Normally, a flyout menu would suggest a Master-Detail setup or even the new AppShell, but the app is consistently using a navigation stack of push/pop and it seemed like overkill to add Master-Detail for just one page.
So I started looking for alternatives. I came across a blog by Kym Phillpotts which implemented something similar to the approach I had been thinking of doing (Incidentally, I would highly recommend watching Kym’s Twitch channel for examples of other great UI implementations).
The page I am adding the flyout to is a landing page with several large navigation buttons on it.
The bit I was looking to implement was the label that comes in from the left on Kym’s example. But I wanted a full height StackLayout, coming in from the right. I started by adding a burger menu to the toolbar and a second StackLayout to my page.
I now have two StackLayout areas. One with the original screen details of several buttons, and my new area that will be my flyout menu bar.
Now I start working on the animation. First, I blatantly steal Kym’s code by adding a click event handler to the new toolbar icon and in the Xaml code-behind file, set this method up to call AnimateOut or AnimateIn depending on the state of the menu.
I also define the size of the collapsed and expended menu based on the height and width of the screen, saving these to variables for easy access.
Note that I am using the value ‘width’ for the x-axis value, to ensure the menu moves onto the screen from the right, rather than from the left as Kym’s example does.
When the menu is not showing, clicking on the menu icon should animate the area to bounce out from the right of the screen. I set the MenuArea to be the size of the expanded menu area, using the “LayoutTo” method to set the new size, the time it will take to complete the animation and to set the animation effect.
Hiding the menu should, as you would expect, hide the menu area.
So, how does it look?
Well… it shows and hides the menu. But the main area doesn’t move out of the way. So I change the OnSizeAllocated to also set variables for the main area sizes and use those in the animate methods.
Nope, even if the main buttons were moving as I’d expect, the squishing up is not what I want.
When you look at the Microsoft page for Simple Animations in Xamarin Forms there is a “FadeTo” that allows us to set the opacity of a visual element. Since I don’t really intend to have the user able to interact with the main area when the menu is showing, this might work.
Well, the page looks good. But as you can see clicking on the menu button causes the button on the main area underneath to trigger instead.
While looking at the animations available I saw one called “TranslateTo” which Kym also referenced in his blog. Hmm… can I cheat and move the main area out of the way?
Well, that looks pretty good to me 🙂 But I’ve only been viewing this on Android – what about iOS?
Hmmm… it does what it’s supposed to, but the burger menu button is rendering centrally on the toolbar, which isn’t what I wanted. After a quick search, I come across James Montemagno’s blog about the Navigation Toolbar introduced in 3.2. This shows the ability to position your items. Just what I need. I switch the XAML.
Yep, that’s what I wanted.
This is just a quick example of how useful and easy the inbuilt animations in Xamarin Form are!
The finished code can all be found in this GitHub repo.
Lisa's Dev Blog 