Xamarin Click only works on 1 view in AbsoluteLayout

Issue

I have a problem. I used the following code to create a Floating Action Button Menu: https://github.com/Polarts/CrossFAB

Now, I added it to my code like this:

<ContentPage.Content>
    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="All">
            <StackLayout Orientation="Vertical">
                <Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
            </StackLayout>
        </ScrollView>

        <c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
                        AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
            <c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
            <c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
            <c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
        </c:FloatingMenu>
    </AbsoluteLayout>
</ContentPage.Content>

I used an AbsoluteLayout, because the FloatingMenu needs to be in the bottom right corner, but the problem is that right now, I can use the Floating Action Button, but the scroll of the ScrollView isn't working. When I put the FloatingMenu code above the ScrollView, the FloatingMenu stops working and I can only scroll.

How can I use both items for clicks?

Solution

PositionProportional, indicates that the x and y values will be interpreted as proportional, while the size values are interpreted as absolute.

A position of (0,0) puts the child in the upper-left corner, while a position of (1,1) puts the child in the lower-right corner, and a position of (0.5,0.5) centers the child within the AbsoluteLayout.

So you could try to change like below:

<ContentPage.Content>
    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All">
            <StackLayout Orientation="Vertical">
                <Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
               
            </StackLayout>
        </ScrollView>

        <c:FloatingMenu  Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
                    AbsoluteLayout.LayoutBounds="1,1" AbsoluteLayout.LayoutFlags="PositionProportional">
            <c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
            <c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
            <c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
        </c:FloatingMenu>
    </AbsoluteLayout>
</ContentPage.Content>

Answered By - Leo Zhu - MSFT