Events in a RelativeLayout page not working apart from the first one at the top in xamarin forms

Issue

I have a relativeLayout page with entry field and a button, however, both entry field and button are not clickable whereas if I use a stacklayout, it works.

for example: I have a relativeLayout page divided into two. the top part is expected to fill the most part of the page while the other part is expected to stay fixed to the bottom. however, all input fields on the first part, including buttons and switch doesn't work i.e. they do not respond to click or focus. here is a code snippet of what I have..

<RelativeLayout Margin="10" x:Name="fourthScreen" IsVisible="False">
            <StackLayout Orientation="Vertical" VerticalOptions="Fill" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}">

                <StackLayout Margin="15">
                    <pv:PancakeView CornerRadius="10,10,0,0" BackgroundColor="{StaticResource Primary}" Opacity="0.85">
                        <Label Text="Transaction Summary" TextColor="White" FontSize="Medium" Margin="10"/>
                    </pv:PancakeView>

                    <pv:PancakeView CornerRadius="0,0,10,10" Margin="0,-5,0,0" BackgroundColor="White">
                        <StackLayout Orientation="Vertical" HorizontalOptions="Fill">
                            <StackLayout>
                                <StackLayout Orientation="Horizontal" Margin="10,5,5,5">
                                    <Label Text="Amount:    " TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Small"/>
                                    <Label Text="NGN 1,000" Margin="3,0,0,0" TextColor="#4CC98D" VerticalOptions="Center" FontAttributes="Bold" FontSize="Title"/>
                                </StackLayout>
                                <StackLayout Margin="5,0,5,3" Grid.Column="0" HorizontalOptions="FillAndExpand">
                                    <BoxView BackgroundColor="#E2E0ED" HeightRequest="1" 
                                         HorizontalOptions="FillAndExpand" Color="#E2E0ED"/>
                                </StackLayout>
                            </StackLayout>

                            <StackLayout>
                                <StackLayout Orientation="Horizontal" Margin="10,5,5,5">
                                    <Label Text="From:    " TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Small"/>
                                    <StackLayout Orientation="Vertical" Margin="15,0,0,0">
                                        <Label Text="Savings Account" Margin="3,0,0,0" TextColor="{StaticResource Primary}" 
                                               VerticalOptions="Center" FontSize="Small"/>
                                        <Label Text="2153487963" Margin="3,0,0,0" TextColor="{StaticResource Primary}" 
                                               VerticalOptions="Center" FontSize="Small"/>
                                    </StackLayout>
                                </StackLayout>
                                <StackLayout Margin="5,0,5,3" Grid.Column="0" HorizontalOptions="FillAndExpand">
                                    <BoxView BackgroundColor="#E2E0ED" HeightRequest="1" 
                                         HorizontalOptions="FillAndExpand" Color="#E2E0ED"/>
                                </StackLayout>
                            </StackLayout>

                            <StackLayout>
                                <StackLayout Orientation="Horizontal" Margin="10,5,5,5">
                                    <Label Text="Plan:       " TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Small"/>
                                    <Label Text="Dstv compact" HorizontalOptions="Center" Margin="15,0,0,0" TextColor="{StaticResource Primary}" 
                                               VerticalOptions="Center" FontSize="Small"/>

                                </StackLayout>
                                <StackLayout Margin="5,0,5,3" Grid.Column="0" HorizontalOptions="FillAndExpand">
                                    <BoxView BackgroundColor="#E2E0ED" HeightRequest="1" 
                                         HorizontalOptions="FillAndExpand" Color="#E2E0ED"/>
                                </StackLayout>
                            </StackLayout>

                            <StackLayout>
                                <StackLayout Orientation="Horizontal" Margin="10,5,5,5">
                                    <StackLayout Orientation="Vertical">
                                        <Label Text="Card" LineBreakMode="WordWrap" TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Small"/>
                                        <Label Text="Number: " LineBreakMode="WordWrap" TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Subtitle"/>
                                    </StackLayout>

                                    <Label Text="212546872135" HorizontalOptions="Center" Margin="10,0,0,0" TextColor="{StaticResource Primary}" 
                                           LineBreakMode="WordWrap" VerticalOptions="Center" FontSize="Small"/>
                                </StackLayout>
                                <StackLayout Margin="5,0,5,3" Grid.Column="0" HorizontalOptions="FillAndExpand">
                                    <BoxView BackgroundColor="#E2E0ED" HeightRequest="1" 
                                         HorizontalOptions="FillAndExpand" Color="#E2E0ED"/>
                                </StackLayout>
                            </StackLayout>

                            <StackLayout>
                                <StackLayout Orientation="Horizontal" Margin="10,5,5,5">
                                    <StackLayout Orientation="Vertical">
                                        <Label Text="Phone" LineBreakMode="WordWrap" TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Small"/>
                                        <Label Text="Number: " LineBreakMode="WordWrap" TextColor="{StaticResource Primary}" VerticalOptions="Center" FontSize="Subtitle"/>
                                    </StackLayout>
                                    <Label Text="08124578365" HorizontalOptions="Center" Margin="10,0,0,0" TextColor="{StaticResource Primary}" 
                                           LineBreakMode="WordWrap" VerticalOptions="Center" FontSize="Small"/>
                                </StackLayout>
                                <StackLayout Margin="5,0,5,3" Grid.Column="0" HorizontalOptions="FillAndExpand">
                                    <BoxView BackgroundColor="#E2E0ED" HeightRequest="1" 
                                         HorizontalOptions="FillAndExpand" Color="#E2E0ED"/>
                                </StackLayout>
                            </StackLayout>
                        </StackLayout>
                    </pv:PancakeView>

                    <StackLayout Orientation="Vertical">

                        <StackLayout Margin="5,2,5,2" HorizontalOptions="Start">
                            <Label Text="Pin" TextColor="{StaticResource Primary}" FontSize="Subtitle"/>
                            <Frame BackgroundColor="#E3E3E3" Style="{StaticResource FrameStyle}" BorderColor="Transparent"
                                       Margin="0,0,0,10" HorizontalOptions="Fill" HeightRequest="50" HasShadow="True">
                                <Controls:CustomEntry  x:Name="pinInput" Grid.Column="1" PlaceholderColor="WhiteSmoke" Placeholder="" 
                                            Keyboard="Default" Style="{StaticResource EntryStyle}"></Controls:CustomEntry>
                            </Frame>
                        </StackLayout>

                        <StackLayout HorizontalOptions="CenterAndExpand">
                            <Button BackgroundColor="#4CC98D" Text="Transfer" WidthRequest="120" CornerRadius="24" HeightRequest="45" Padding="5"/>
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </StackLayout>

            <StackLayout Margin="10,10,10,15" VerticalOptions="End" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                      RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}"
                      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}">

                <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
                    <StackLayout>
                        <Image Source="checkBoxUn.png" HorizontalOptions="Center" Aspect="AspectFit" HeightRequest="20"/>
                    </StackLayout>
                    <StackLayout>
                        <Image Source="checkBoxUn.png" HorizontalOptions="Center" Aspect="AspectFit" HeightRequest="20"/>
                    </StackLayout>
                    <StackLayout>
                        <Image Source="checkBoxUn.png" HorizontalOptions="Center" Aspect="AspectFit" HeightRequest="20"/>
                    </StackLayout>
                    <StackLayout>
                        <Image Source="checkBoxFill.png" HorizontalOptions="Center" Aspect="AspectFit" HeightRequest="20"/>
                    </StackLayout>

                </StackLayout>
            </StackLayout>
        </RelativeLayout>

Solution

From shared code, I can't reproduce all the phenoment. However, I can occur the same problem with Entry that can not be typed.

This problem is likely because something overlaps your buttons or with your constraints they are going out of your relative layout at all with xaml.

The root StackLayout of RelativeLayout has the defined Height is too small .

<RelativeLayout Margin="10"
                    x:Name="fourthScreen">
        <StackLayout Orientation="Vertical"
                        VerticalOptions="Fill"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}">
...
</RelativeLayout>

You will see that the Height of StackLayout is 0.25 of ParentView. However, the Height of content View is too large.If you modify it to 1, the Entry can be interactive.

As follow:

<RelativeLayout Margin="10"
                    x:Name="fourthScreen">
        <StackLayout Orientation="Vertical"
                        VerticalOptions="Fill"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
...
</RelativeLayout>

If you need to make all the controlls be interactive, you need to set the Height of root StackLayout has the fitted Height.

Answered By - Junior Jiang