So, the reason this happens with Frame is that Frame retains some default Android
Elevation
behaviors from Forms for backward compatibility reasons. There are several ways you can work around this:
You can use Border instead of Frame. Border doesn't have any intrinsic
Elevation
properties on Android, so it doesn't have this behavior:
<Grid RowDefinitions="300,*">
<Border ... />
<Button Grid.Row="1" ZIndex="10" Margin="0,-20,100,0" ... />
</Grid>
You can wrap the Frame inside of a ContentView; this will give the Frame a new context for its Elevation
, preventing it from elevating above the other controls in the Grid's context:
<Grid RowDefinitions="300,*">
<ContentView>
<Frame ... />
</ContentView>
<Button Grid.Row="1" ZIndex="10" Margin="0,-20,100,0" ... />
</Grid>
You can force the Android Elevation
property for the Frame to be zero using the Elevation
platform-specific:
<ContentPage ...
xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
<Grid RowDefinitions="300,*">
<Frame android:VisualElement.Elevation="0" ... />
<Button Grid.Row="1" ZIndex="10" Margin="0,-20,100,0" ... />
</Grid>
</ContentPage>
Or you can disable the Frame's shadow:
<Grid RowDefinitions="300,*">
<Frame HasShadow="False" ... />
<Button Grid.Row="1" ZIndex="10" Margin="0,-20,100,0" ... />
</Grid>
You could also customize the handler and disable the backward-compatible Elevation
handling.
@hartez nice explanation! Your suggestions work like a charm. But the idea of MAUI is making one view for multiple platforms. Shouldn't this still considered as a bug?
[EDIT]
Only does this not fix having a shadow on my frame. Any suggestions?