Results 1 to 2 of 2

Thread: TapGestureRecognizer on an Image on Tab not work

  1. #1

    Thread Starter
    Fanatic Member vuyiswamb's Avatar
    Join Date
    Jan 2007
    Location
    South Africa
    Posts
    829

    TapGestureRecognizer on an Image on Tab not work

    Good Day All

    i have images in a Listview ,i tried this on a normal Listview and also Telerik , it behaves the same. The Tab event is not fired consistently sometimes when i tap the images they dont respond to the Tap.

    Here is my xaml


    Code:
                 <telerikDataControls:RadListView  Grid.Row="1" x:Name="lstfun" BackgroundColor="Transparent">
                        <telerikDataControls:RadListView.ItemTemplate>
                            <DataTemplate>
                                <telerikListView:ListViewTemplateCell>
                                    <telerikListView:ListViewTemplateCell.View>
                                        <Grid Padding="8,0,8,10" RowSpacing="0">
                                            <Grid Padding="1" BackgroundColor="#e1e1e3" RowSpacing="0">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="*" />
                                                    <RowDefinition Height="53" />
                                                </Grid.RowDefinitions>
                                                <Grid Grid.Row="0" Padding="0" BackgroundColor="#e4e4e4">
                                                    <StackLayout>
                                                        <Label   Text="{Binding FUN_NAME}" FontFamily="Ubuntu" FontSize="14" TextColor="#9e9ea0" />
                                                        <Image  Source="HeaderBackground.png" HeightRequest="100" Aspect="AspectFill"/>
                                                        <Label  Text="{Binding DESCRIPTION}" FontFamily="Ubuntu-Medium" FontSize="14" TextColor="#3c3947" />
                                                    </StackLayout>
                                                </Grid>
                                                <Grid Grid.Row="1" BackgroundColor="#ffffff" RowSpacing="0">
                                                    <Grid   RowSpacing="0">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="15" />
                                                            <RowDefinition Height="4" />
                                                            <RowDefinition Height="15" />
                                                        </Grid.RowDefinitions>
        
                                                        <StackLayout Padding="-25,12,0,0" Spacing="-100" Orientation="Horizontal">
        
                                                            <StackLayout Orientation="Vertical" >
                                                                <Image Source="chat.png" InputTransparent="false" HorizontalOptions="Center" HeightRequest="35" WidthRequest="150" >
                                                                    <Image.GestureRecognizers>
                                                                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped_4"/>
                                                                    </Image.GestureRecognizers>
                                                                </Image>
                                                            </StackLayout>
        
                                                            <StackLayout Orientation="Vertical">
                                                                <Image Source="love.png" x:Name="imglike" InputTransparent="false"   HorizontalOptions="Center" HeightRequest="35" WidthRequest="150" >
                                                                    <Image.GestureRecognizers>
                                                                        <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
                                                                    </Image.GestureRecognizers>
                                                                </Image>
                                                            </StackLayout>
        
                                                            <StackLayout Orientation="Vertical">
                                                                <Image x:Name="imgfunin" Source="funin.png"  InputTransparent="false"  HorizontalOptions="Center" HeightRequest="35" WidthRequest="150" >
                                                                    <Image.GestureRecognizers>
                                                                        <TapGestureRecognizer  NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped_1"/>
                                                                    </Image.GestureRecognizers>
                                                                </Image>
                                                            </StackLayout>
        
                                                            <StackLayout Orientation="Vertical">
                                                                <Image Source="Fakenews.png" InputTransparent="false"  HorizontalOptions="Center" HeightRequest="35" WidthRequest="150" >
                                                                    <Image.GestureRecognizers>
                                                                        <TapGestureRecognizer  NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped_2" />
                                                                    </Image.GestureRecognizers>
                                                                </Image>
                                                            </StackLayout>
        
                                                            <StackLayout  Orientation="Vertical">
                                                                <Image Source="share.png" HorizontalOptions="Center" InputTransparent="false"  HeightRequest="35" WidthRequest="150" >
                                                                    <Image.GestureRecognizers>
                                                                        <TapGestureRecognizer  NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped_3" />
                                                                    </Image.GestureRecognizers>
                                                                </Image>
                                                            </StackLayout>
                                                        </StackLayout> 
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </telerikListView:ListViewTemplateCell.View>
                                </telerikListView:ListViewTemplateCell>
                            </DataTemplate>
                        </telerikDataControls:RadListView.ItemTemplate>
                    </telerikDataControls:RadListView>
    and the event handlers for my images re

    Code:
           private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
                            {
                    
                                DisplayAlert("", "Like Tabbed", "Ok");
                            }
                    
                            private void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)
                            {
                                DisplayAlert("", "Funin", "Ok");
                            }
                    
                            private void TapGestureRecognizer_Tapped_2(object sender, EventArgs e)
                            {
                                DisplayAlert("", "Fake News Tabbed","Ok"); 
                    
                            }
                    
                            private void TapGestureRecognizer_Tapped_3(object sender, EventArgs e)
                            {
                    
                                DisplayAlert("", "Shareout Tabbed", "Ok");
                            }
                    
                            private void TapGestureRecognizer_Tapped_4(object sender, EventArgs e)
                            {
                    
                                DisplayAlert("", "Comment Tabbed", "Ok");
                            }
    Thanks

  2. #2
    Lively Member
    Join Date
    Jan 2020
    Posts
    120

    Re: TapGestureRecognizer on an Image on Tab not work

    Hello, @vuyiswamb

    Please try this code it works properly:

    MainPage.xaml code:

    Code:
    <Label Text="Image not tapped" x:Name="lblText" />
    <Image Source="tapped.jpg">
        <Image.GestureRecognizers>
            <TapGestureRecognizer
                    Tapped="OnTapGestureRecognizerTapped"
                    NumberOfTapsRequired="1" />
      </Image.GestureRecognizers>
    </Image>
    MainPage.xaml.cs code:

    Code:
    void OnTapGestureRecognizerTapped(object sender, EventArgs args)
    {
        lblText.Text = "Now Image Is Tapped..";
    }
    I hope above code will be useful for you.
    Thank you.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width