ImageButtons in Xamarin Forms RelativeLayout Not Firing Properly

Question

I have a RelativeLayout containing a Frame, which then houses a StackLayout which contains a number of ImageButtons.

All but one of the buttons are clickable, but the click surface is very small. That is, only the very bottom of the buttons are clickable and fire the bound commands.

The last button is not clickable anywhere and will not fire. Instead the underlying CollectionItem selection event is fired.

What am I missing with this approach?

I'm assuming there is a configuration that insures all of each button is clickable and that the click event does not propagate to the underlying control.

Has anyone encountered this?

<Grid
    Grid.Row="4"
    Grid.Column="0"
    Grid.ColumnSpan="3"
    Margin="0,30,0,0"
    HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3.33*" />
        <ColumnDefinition Width="3.33*" />
        <ColumnDefinition Width="3.33*" />
    </Grid.ColumnDefinitions>
    <ImageButton
        Grid.Column="0"
        BackgroundColor="Transparent"
        Command="{Binding LikeTriggeredCommand}"
        HorizontalOptions="Center"
        VerticalOptions="End">
        <ImageButton.HeightRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="17" />
                <On Platform="Android" Value="17" />
                <On Platform="UWP" Value="23" />
            </OnPlatform>
        </ImageButton.HeightRequest>
        <ImageButton.WidthRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="17" />
                <On Platform="Android" Value="17" />
                <On Platform="UWP" Value="23" />
            </OnPlatform>
        </ImageButton.WidthRequest>
        <ImageButton.Source>
            <FontImageSource
                FontFamily="{StaticResource FontAwesomeSolid}"
                Glyph="{x:Static infrastructure:FontAwesomeIcons.ThumbsUp}"
                Color="Black">
                <FontImageSource.Size>
                    <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="iOS" Value="8" />
                        <On Platform="Android" Value="15" />
                        <On Platform="UWP" Value="15" />
                    </OnPlatform>
                </FontImageSource.Size>
            </FontImageSource>
        </ImageButton.Source>
    </ImageButton>
    <ImageButton
        Grid.Column="1"
        BackgroundColor="Transparent"
        HorizontalOptions="Center"
        VerticalOptions="End">
        <ImageButton.HeightRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="17" />
                <On Platform="Android" Value="17" />
                <On Platform="UWP" Value="23" />
            </OnPlatform>
        </ImageButton.HeightRequest>
        <ImageButton.WidthRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="17" />
                <On Platform="Android" Value="17" />
                <On Platform="UWP" Value="23" />
            </OnPlatform>
        </ImageButton.WidthRequest>
        <ImageButton.Source>
            <FontImageSource
                FontFamily="{StaticResource FontAwesomeSolid}"
                Glyph="{x:Static infrastructure:FontAwesomeIcons.Comment}"
                Color="Black">
                <FontImageSource.Size>
                    <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="iOS" Value="8" />
                        <On Platform="Android" Value="15" />
                        <On Platform="UWP" Value="15" />
                    </OnPlatform>
                </FontImageSource.Size>
            </FontImageSource>
        </ImageButton.Source>
    </ImageButton>
    <ImageButton
        Grid.Column="2"
        BackgroundColor="Transparent"
        Command="{Binding ShareCommand}"
        HorizontalOptions="Center"
        VerticalOptions="End">
        <ImageButton.HeightRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="17" />
                <On Platform="Android" Value="17" />
                <On Platform="UWP" Value="23" />
            </OnPlatform>
        </ImageButton.HeightRequest>
        <ImageButton.WidthRequest>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS" Value="17" />
                <On Platform="Android" Value="17" />
                <On Platform="UWP" Value="23" />
            </OnPlatform>
        </ImageButton.WidthRequest>
        <ImageButton.Source>
            <FontImageSource
                FontFamily="{StaticResource FontAwesomeSolid}"
                Glyph="{x:Static infrastructure:FontAwesomeIcons.ShareAlt}"
                Color="Black">
                <FontImageSource.Size>
                    <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="iOS" Value="8" />
                        <On Platform="Android" Value="15" />
                        <On Platform="UWP" Value="15" />
                    </OnPlatform>
                </FontImageSource.Size>
            </FontImageSource>
        </ImageButton.Source>
    </ImageButton>
    <RelativeLayout
        Grid.Column="0"
        Grid.ColumnSpan="2"
        IsVisible="{Binding LikeTriggered}">
        <Frame
            Padding="2"
            BackgroundColor="White"
            CornerRadius="20"
            HasShadow="True"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                   Property=Height,
                                                                   Factor=2,
                                                                   Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                  Property=Width,
                                                                  Factor=1,
                                                                  Constant=0}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                              Property=X,
                                                              Factor=30,
                                                              Constant=60}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                              Property=Y,
                                                              Factor=30,
                                                              Constant=-20}">
            <StackLayout Orientation="Horizontal">
                <ImageButton
                    x:Name="LikeButton"
                    Padding="2"
                    BackgroundColor="Transparent"
                    Command="{Binding FloatingLikeTriggeredCommand}"
                    HorizontalOptions="FillAndExpand"
                    Source="ThumbsUp.png"
                    WidthRequest="30" />
                <ImageButton
                    x:Name="LoveButton"
                    Padding="2"
                    BackgroundColor="Transparent"
                    Command="{Binding LoveTriggeredCommand}"
                    HorizontalOptions="FillAndExpand"
                    Source="Love.png"
                    WidthRequest="30" />
                <ImageButton
                    x:Name="HahaButton"
                    Padding="2"
                    BackgroundColor="Transparent"
                    Command="{Binding HahaTriggeredCommand}"
                    HorizontalOptions="FillAndExpand"
                    Source="Haha.png"
                    WidthRequest="30" />
                <ImageButton
                    x:Name="WowButton"
                    Padding="2"
                    BackgroundColor="Transparent"
                    Command="{Binding WowTriggeredCommand}"
                    HorizontalOptions="FillAndExpand"
                    Source="Wow.png"
                    WidthRequest="30" />
                <ImageButton
                    x:Name="SadButton"
                    Padding="2"
                    BackgroundColor="Transparent"
                    Command="{Binding SadTriggeredCommand}"
                    HorizontalOptions="FillAndExpand"
                    Source="Sad.png"
                    WidthRequest="30" />
                <ImageButton
                    x:Name="AngryButton"
                    Padding="2"
                    BackgroundColor="Transparent"
                    Command="{Binding AngryTriggeredCommand}"
                    HorizontalOptions="FillAndExpand"
                    Source="Angry.png"
                    WidthRequest="30" />
            </StackLayout>
            <Frame.Behaviors>
                <behaviors:EventToCommandBehavior Command="{Binding LostFocusCommand}" EventName="Unfocused" />
            </Frame.Behaviors>
        </Frame>
    </RelativeLayout>
</Grid>

The reason for the relative layout is to have a popup floating menu with items on with reaction actions.

Answer 1

Cause: In your case , you set the value of Factor in Frame.WidthConstraint as 1 . Now Width of the frame equals the with of it parent view (RelativeLayout) .However , you set the Constant of Frame.XConstraint at the same time . So the party of Frame (right)will beyond the size of RelativeLayout . You could check it by setting the background color of the Frame and RelativeLayout .

Solution :

If you want to let the emoji bar display in the center of screen , you could set the RelativeLayout overlay the whole screen like following .

...

 <RelativeLayout   
        x:Name="layout"
        Grid.Column="0"
        Grid.ColumnSpan="3"
        IsVisible="{Binding LikeTriggered}">
            <Frame

            CornerRadius="20"
            HasShadow="True"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                   Property=Height,
                                                                   Factor=2,
                                                                   Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                  Property=Width,
                                                                  Factor=0.7,
                                                                  Constant=0}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                              Property=X,
                                                              Factor=30,
                                                              Constant=60}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                              Property=Y,
                                                              Factor=30,
                                                              Constant=-60}">

...