Xamarin Shell Flyout menu greyed content
ITMember ✭✭✭
Hi,
I have a xamarin shell application with a flyout menu.
When I open the menu inside the iOS application the right content isn't greyed.
In the Android application this is the default behavior.
On iOS, I would like to have the same behavior as Android.
Here the Xaminals application as example.
Android
iOS
Anyone can help me?
Thank you!
Best Answer
-
DavidHollowell
USMember ✭✭
Hi Hikari91,
I hope you're well. Shell isn't designed to be as customizable as other options, as it's a simplification of other layouts with more default behaviors. The behavior you describe is adjustable in a MasterDetail layout via the iOS specific ApplyShadow property as described here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/masterdetailpage-shadow.
And yes, there are other approaches you could take to solve it. First step would likely be to identify the native control that should be modified and determine what property should be set to apply the desired effect. Note that it's possible for changes in Xamarin.Forms implementation to impact the answer to this, so I'll give steps to find the answer that are relevant even if there's implementation changes down the road.You can use the Xamarin Inspector from Visual Studio for Mac 2017 (version 7.x) and Visual Studio 2017 (version 15.x) for now and we're considering replacing this feature in a future version of Visual Studio and Visual Studio for Mac. There may also be native platform solutions or 3rd party offerings for inspecting the native controls and properties. https://docs.microsoft.com/en-us/xamarin/tools/inspector/
Alternatively, you could review Xamarin.Forms current source to see the ShellRenderer implementation. It will call a method that creates renderers, which themselves may call other methods to create other renderers, in a chain, until you identify the native controls that would be displayed on iOS for a Shell.
From here, it's a matter of native iOS platform best practices to decide how to style things. Once you identify the native control and property you're after, you can use iOS specifics or Effects to accomplish the desired effects. Or you can completely replace the renderer with a custom renderer.Platform specifics: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/
Effects: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/effects/introduction
Custom Renderers: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/Additionally/Alternatively, you could request a feature for ApplyShadow in Shell here: https://github.com/xamarin/Xamarin.Forms/issues/new/
So, I think you're looking for the MasterDetail approach rather than Shell, if you're hoping for out-of-the-box support to apply the shadow. If you prefer to stick with Shell, you can use Xamarin Inspector, native tools, or source code analysis to determine what native controls are used, then use platform specifics or Effects to set corresponding properties on those controls. Or you can create a custom renderer to completely replace any renderer(s) in question.
Note that source code is subject to change, so if you make assumptions about how Shell will be rendered, make sure to test those each time you update Xamarin.Forms.Best Regards, -David
5
Answers
It is the default setting on iOS. If you want a consistent effect on both iOS and Android, try to raise an issue here:
https://github.com/xamarin/Xamarin.Forms/issues
Thank you, but there is a workaround? Maybe to create a custom renderer?
Hi Hikari91,
I hope you're well. Shell isn't designed to be as customizable as other options, as it's a simplification of other layouts with more default behaviors. The behavior you describe is adjustable in a MasterDetail layout via the iOS specific ApplyShadow property as described here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/masterdetailpage-shadow.
And yes, there are other approaches you could take to solve it. First step would likely be to identify the native control that should be modified and determine what property should be set to apply the desired effect. Note that it's possible for changes in Xamarin.Forms implementation to impact the answer to this, so I'll give steps to find the answer that are relevant even if there's implementation changes down the road.
You can use the Xamarin Inspector from Visual Studio for Mac 2017 (version 7.x) and Visual Studio 2017 (version 15.x) for now and we're considering replacing this feature in a future version of Visual Studio and Visual Studio for Mac. There may also be native platform solutions or 3rd party offerings for inspecting the native controls and properties. https://docs.microsoft.com/en-us/xamarin/tools/inspector/
Alternatively, you could review Xamarin.Forms current source to see the ShellRenderer implementation. It will call a method that creates renderers, which themselves may call other methods to create other renderers, in a chain, until you identify the native controls that would be displayed on iOS for a Shell.
From here, it's a matter of native iOS platform best practices to decide how to style things. Once you identify the native control and property you're after, you can use iOS specifics or Effects to accomplish the desired effects. Or you can completely replace the renderer with a custom renderer.
Platform specifics: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/
Effects: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/effects/introduction
Custom Renderers: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/
Additionally/Alternatively, you could request a feature for ApplyShadow in Shell here: https://github.com/xamarin/Xamarin.Forms/issues/new/
So, I think you're looking for the MasterDetail approach rather than Shell, if you're hoping for out-of-the-box support to apply the shadow. If you prefer to stick with Shell, you can use Xamarin Inspector, native tools, or source code analysis to determine what native controls are used, then use platform specifics or Effects to set corresponding properties on those controls. Or you can create a custom renderer to completely replace any renderer(s) in question.
Note that source code is subject to change, so if you make assumptions about how Shell will be rendered, make sure to test those each time you update Xamarin.Forms.
Best Regards, -David
Hi @Hikari91
just add this line of code for you shell FlyoutBackdrop="rgba(32,33,32,0.81)"
check this image