How to get FAB to float over WebView in Xamarin XAML

Question

I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.

If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.

<ContentPage ...snip... Title="Document">
    <StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
        <WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
        <Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}" 
                               VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
        <customControls:ImageButton x:Name="fab" 
                                Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                Command="{Binding AddCommand}"
                                AbsoluteLayout.LayoutFlags="PositionProportional"
                                AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
                                Margin="10" />
    </StackLayout>
</ContentPage>

If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.

I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.

Thanks

Answer 1

Use a Grid and do not indicate rows or columns.

Something like this:

<Grid Padding="5,5,5,5"
      VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand">
    <WebView x:Name="webViewDocument"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand" />
    <Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
           VerticalOptions="End"
           HorizontalOptions="Center"
           HorizontalTextAlignment="End"
           FontSize="Small" />
    <customControls:ImageButton x:Name="fab"
                                Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
                                Command="{Binding AddCommand}"
                                VerticalOptions="End"
                                HorizontalOptions="End"
                                Margin="10" />
</Grid>

This should work for you.