Xamarin forms, buttons inside frame are not firing an event

Issue

I have a form with a frame and 3 buttons inside.

The click event is not firing to any of these buttons.

I put a button outside the frame and its clickable.

The form is from a sample at this page https://askxammy.com/replicating-user-profile-ui-in-xamarin-forms/.

I asked the author but she didnt respond. Here is the code.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="UserProfileUISample.MainPage">

    <Grid BackgroundColor="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" /> 
        </Grid.RowDefinitions>

     <!-- 1. Profile picture-->   
     <Image Grid.Row="0" Source="KattyWhite" VerticalOptions="Start" /> 

     <!-- 2. Contact informaqtion frame-->   
     <StackLayout Grid.Row="0" BackgroundColor="White" VerticalOptions="End">
        <Frame CornerRadius="40" Style="{StaticResource stlMainFrame}" >
            <!-- Blocks: 3 and 4 -->
            <Grid Padding="25,10,25,0" RowSpacing="0"> 
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*"/>
                   <ColumnDefinition Width="*"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions> 
               <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/> 
               </Grid.RowDefinitions>
                  <!-- 3. Phone & message buttons-->
                <Button x:Name="btn1" Grid.Row="0" Grid.Column="1" Style="{StaticResource stlContactBtn}" HorizontalOptions="End"   ImageSource="Phone" Clicked="OnClicked"/>
                 <Button x:Name="btn2" Grid.Row="0" Grid.Column="2" Style="{StaticResource stlContactBtn}" HorizontalOptions="Start" ImageSource="Correo" Clicked="Button_Clicked_1"/>
                 <!-- 4. Contact information-->
                 <Label x:Name="lblName" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="Katty White" FontAttributes="Bold" FontSize="20"/>
                 <Label x:Name="lblCode" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Text="New York" TextColor="#a5a2a2" FontSize="16"/>
                 <!--<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,10,0,0" FontSize="16">
                   <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Email: " FontAttributes="Bold" />
                            <Span Text=" [email protected]"  /> 
                        </FormattedString>
                    </Label.FormattedText>
                 </Label>-->
                <!--4. Contact information: Board inforation-->
                <Label Grid.Row="3" Grid.Column="0" Text="Λαχεία" Style="{StaticResource stlBoardTitle}" />
                <Label x:Name="lblLaxeia" Grid.Row="4" Grid.Column="0" Text="678" Style="{StaticResource stlBoardDesc}"/>

                <Label Grid.Row="3" Grid.Column="1" Text="Γεμίσματα" Style="{StaticResource stlBoardTitle}"/>
                <Label x:Name="lblGemismata" Grid.Row="4" Grid.Column="1" Text="340" Style="{StaticResource stlBoardDesc}"/>

                <Label Grid.Row="3" Grid.Column="2" Text="Κληρώσεις" Style="{StaticResource stlBoardTitle}"/>
                <Label x:Name="lblKliroseis" Grid.Row="4" Grid.Column="2" Text="67k" Style="{StaticResource stlBoardDesc}"/>
                <!--4. Contact information: Follow button-->
                <Button x:Name="btn3" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" TextColor="White" BackgroundColor="#2193f3" Text="Αναλυτικά" Margin="0,20,0,2" FontAttributes="Bold" FontSize="17" HeightRequest="45"/>
            </Grid> 
         </Frame>
        <Button x:Name="btn22" Grid.Row="6" Grid.Column="2" Style="{StaticResource stlContactBtn}" HorizontalOptions="Start" ImageSource="Correo" Clicked="Button_Clicked_1"/>

    </StackLayout>
   
</Grid> 

Can you help me? Thank you

Solution

When You set TranslationY="-50" property to button,it will make the button out of the bounds of Grid, so it won't response to the click event.

There is a report on the github https://github.com/xamarin/Xamarin.Forms/issues/6760.

I would suggest you to add those buttons or labels directly to Grid and use absolute-layout, relative-layout or other layout to fix their positions.

Answered By - Leo Zhu - MSFT