Auto Collapsing Master Panel inside Xamarin.Forms UWP app.
Recently I've been migrating a Xamarin.Forms application which works on phones and tablets over to UWP so that its compatible with Windows 10 and available on the desktop.
Most things have ported well and after a few tweaks most things are running. However during testing I noticed something odd. I use a master detail page to provide a navigation pane and then a details pane. On phones the navigation page is shown and hidden as expected. On tablets if landscape the menu is always open and if portrait it pops up over the details. Now on UWP it behaves as the tablet however I also expected if the window became small or docked to the side of the screen the menu would again turn into a pop over, but Xamarin.Forms doesn't support this by default.
It is however quite easy to support this via a custom renderer. We can override the elements size changed and determine the size of the element. If the size is less than the minimum we want the menu to be automatically opened for we can hide it.
Things to note, I'm checking if the Control.Width is 0 as this is usually if the app is starting up or other scenarios where we can't determine the state of the menu. Also I'm having to schedule the actual calculation of the width and updating the control on the dispatcher. This isn't for cross threading issues but an odd case where if you maximise or restore the size of the application window the control width is the previous size not the current size. By putting this on the dispatcher the values are correct by time they are required.
An added benefit of this custom renderer is that the show/hide menu button is handled by the default controls.
Hope this helps
Most things have ported well and after a few tweaks most things are running. However during testing I noticed something odd. I use a master detail page to provide a navigation pane and then a details pane. On phones the navigation page is shown and hidden as expected. On tablets if landscape the menu is always open and if portrait it pops up over the details. Now on UWP it behaves as the tablet however I also expected if the window became small or docked to the side of the screen the menu would again turn into a pop over, but Xamarin.Forms doesn't support this by default.
It is however quite easy to support this via a custom renderer. We can override the elements size changed and determine the size of the element. If the size is less than the minimum we want the menu to be automatically opened for we can hide it.
Things to note, I'm checking if the Control.Width is 0 as this is usually if the app is starting up or other scenarios where we can't determine the state of the menu. Also I'm having to schedule the actual calculation of the width and updating the control on the dispatcher. This isn't for cross threading issues but an odd case where if you maximise or restore the size of the application window the control width is the previous size not the current size. By putting this on the dispatcher the values are correct by time they are required.
An added benefit of this custom renderer is that the show/hide menu button is handled by the default controls.
Hope this helps
Comments
Post a Comment