Cardview: tapgesturerecognizer of stack layout in data tamplet not working xamarin forms iOS inside CarouselView

Created on 18 Feb 2019  路  10Comments  路  Source: AndreiMisiukevich/CardView

I'm trying to use tapgesturerecognizer in stack layout inside the data templet but its not working in iOS working fine in Android.

 <cards:CarouselView x:Name="CarouselView"  HeightRequest="209" Grid.Row="0"  
                                                       VerticalOptions="FillAndExpand" 
                                                        HorizontalOptions="FillAndExpand"
                                                        ItemAppearing="Handle_ItemAppearing"
                                        ItemsSource="{Binding Photos}"
                                       >
                                        <cards:CarouselView.ItemTemplate>
                                            <DataTemplate>
                                                <ContentView>
                                                     <Grid BackgroundColor="{StaticResource lightBlueGrey}"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="*" />
                                                        </Grid.RowDefinitions>
                                                        <Grid Grid.Row="0"  BackgroundColor="{StaticResource lightBlueGrey}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="*" />
                                                                <ColumnDefinition Width="*" />
                                                                <ColumnDefinition Width="*" />
                                                            </Grid.ColumnDefinitions>
                                                            <StackLayout Grid.Column="0"  Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Center">
                                                                <ffSvg:SvgCachedImage HeightRequest="53" WidthRequest="53" Source="swap_contact.svg" />
                                                                <Label Margin="14,0" Text="{Binding ContactString}" HorizontalTextAlignment="Center" FontFamily="{StaticResource NormalFont}" FontSize="13" FontAttributes="None" TextColor="{StaticResource BlueGrey}" />
                                                                <StackLayout.GestureRecognizers>
                                                                    <TapGestureRecognizer Tapped="ContactTapped" NumberOfTapsRequired="1"  />
                                                                </StackLayout.GestureRecognizers>
                                                            </StackLayout>
                                                            <StackLayout Grid.Column="1" Opacity="{Binding Opacity}" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Center">
                                                                <ffSvg:SvgCachedImage x:Name="FavIcon" HeightRequest="53" WidthRequest="53" Source="{Binding FavIcon}" />
                                                                <Label  Margin="14,0" x:Name="FavLabel" Text="{Binding FavouriteString}"  HorizontalTextAlignment="Center" FontFamily="{StaticResource NormalFont}" FontSize="13" FontAttributes="None" TextColor="{StaticResource BlueGrey}" />
                                                                <StackLayout.GestureRecognizers>
                                                                    <TapGestureRecognizer Tapped="FavoritesTapped" NumberOfTapsRequired="1" />
                                                                </StackLayout.GestureRecognizers>
                                                            </StackLayout>
                                                            <StackLayout Grid.Column="2" Opacity="{Binding Opacity}" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="Center">
                                                                <ffSvg:SvgCachedImage HeightRequest="53" WidthRequest="53" Source="swap_decline.svg" />
                                                                <Label  Margin="21,0" Text="{i18n:Translate MatchesStringDelete}" HorizontalTextAlignment="Center" FontFamily="{StaticResource NormalFont}" FontSize="13" FontAttributes="None" TextColor="{StaticResource BlueGrey}" />
                                                                <StackLayout.GestureRecognizers>
                                                                    <TapGestureRecognizer Tapped="DeleteTapped" NumberOfTapsRequired="1" />
                                                                </StackLayout.GestureRecognizers>
                                                            </StackLayout>
                                                        </Grid>
                                                        <ffSvg:SvgCachedImage Grid.Row="0" HeightRequest="209" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="{Binding Photo}" />


                                                    </Grid>
                                                </ContentView>
                                            </DataTemplate>
                                        </cards:CarouselView.ItemTemplate>


                                    </cards:CarouselView>
question resolved

Most helpful comment

Meanwhile, I got it solved. It was IsPanInteractionEnabled which should be True for iOS and False for Android. In my case was False, tested first on Android.

All 10 comments

@aman720gupta hi, thanks for creating issue
What versions of XF do you use?

@AndreiMisiukevich I'm using 3.4.0.1009999

@AndreiMisiukevich I have resolved it by adding InputTransparent="true" in line <ffSvg:SvgCachedImage Grid.Row="0" HeightRequest="209" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="{Binding Photo}" />

Although I'm facing issues when I'm using this inside list view pages automatically scrolls when I scroll list view can you please help me out with this

@AndreiMisiukevich will check and let you know.

Thanks a lot :)

Hi, unfortunately, it's happens to my iOS, too. This is my carousel:
<cards:CarouselView x:Name="myCarousel" ItemsSource="{Binding ItemsSource}" InputTransparent="True" IsEnabled="False" VerticalSwipeThresholdDistance="1000" IsPanInteractionEnabled="False" IsPanSwipeEnabled="False" IsAutoInteractionRunning="False" IsAutoNavigatingAimationEnabled="False" IsCyclical="False" HeightRequest="100" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" SelectedIndex="{Binding Position}">

And in ItemsSource I have a few different views, but first one contains a grid with four custom controls:

<Grid ColumnSpacing="30" HorizontalOptions="Center" RowSpacing="30" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <controls:SwitchboardButton Icon="electricity.png" x:Name="ElectricityButton" InputTransparent="True" Grid.Row="0" Grid.Column="0" Bold="None" Label="Electrician" > <controls:SwitchboardButton.GestureRecognizers> <TapGestureRecognizer Tapped="ElectricityButtonTapped" /> </controls:SwitchboardButton.GestureRecognizers> </controls:SwitchboardButton>

And the SwitchboardButton is nothing fancy:
<ContentView x:Class="feexers.Views.SwitchboardButton" xmlns="http://xamarin.com/schemas/2014/forms" InputTransparent="True" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <StackLayout Orientation="Vertical" InputTransparent="True" x:Name="SwitchboardStack"> <Image x:Name="SwitchboardIcon" InputTransparent="True" HorizontalOptions="Center" Source="{Binding Icon}" /> <Label x:Name="SwitchboardLabel" FontAttributes="{Binding Bold}" HorizontalOptions="Center" Text="{Binding Label}" TextColor="#3A444D" />
I already added InputTransparent everywhere but no luck.
Any ideas? Thanks

@emipasat could you please prepare small sample?

Meanwhile, I got it solved. It was IsPanInteractionEnabled which should be True for iOS and False for Android. In my case was False, tested first on Android.

@emipasat awesome )

Was this page helpful?
0 / 5 - 0 ratings

Related issues

troyvnit picture troyvnit  路  8Comments

JTOne123 picture JTOne123  路  5Comments

InquisitorJax picture InquisitorJax  路  6Comments

alicint picture alicint  路  3Comments

ssotir picture ssotir  路  7Comments