question

OlidSayed-5081 avatar image
0 Votes"
OlidSayed-5081 asked JarvanZhang-MSFT answered

Nested Grid TapGestureRecognizer not working?

I'm new in Xamarin. I have been trying to get tap on every row of my grid but unfortunately not working. I have a CollectionView with A grid and inside this grid on row=1 I have another CollectionView with a new Grid.

My Question is when I tap on the rows onlu row=0 and row=2 is firing , not row=1 where I have Another CollectionView. I have attached my code bellow.



<RefreshView Command="{Binding LoadAlertsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}" IsVisible="{Binding RefreshViewVisible}">
<CollectionView x:Name="AlertsListView"
ItemsSource="{Binding Alerts}"
SelectionMode="None" >
<CollectionView.ItemTemplate>
<DataTemplate>
<SwipeView x:DataType="model:AlertsTable" Threshold="250">
<SwipeView.RightItems>
<SwipeItems Mode="Execute">
<SwipeItem Text="Delete"
BackgroundColor="#ff453a"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:AlertViewModel}}, Path=DeleteCommand}"
CommandParameter="{Binding .}"/>
</SwipeItems>
</SwipeView.RightItems>
<Grid Padding="15,5,15,0" x:DataType="model:AlertsTable" x:Name="Grid1" BackgroundColor="Black">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
                                     <ColumnDefinition Width="Auto"/>
                                 </Grid.ColumnDefinitions>
    
                             <BoxView Color="#292929" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4"/>
                             <Label x:Name="TextLabel" Grid.Row="0" Grid.Column="0"  Text="{Binding title}" TextColor="White" FontSize="20" FontAttributes="Bold"/>
                                 <Label x:Name="RightTextLabel" Grid.Row="0" Grid.Column="1" FontSize="15" Text="{Binding date}" HorizontalOptions="Center"  VerticalOptions="CenterAndExpand"  TextColor="White"/>
                                 <Label Text="{x:Static fontAwesome:FontAwesomeIcons.Circle}"
                                                IsVisible="{Binding wasRead}"
                                                Grid.Row="0" Grid.Column="3"
                                                HorizontalOptions="Center"
                                                VerticalOptions="CenterAndExpand"
                                                FontSize="Medium"
                                                TextColor="White"
                                                FontFamily="fa5r"/>
                                 <!--<Frame >-->
                                 <CollectionView x:Name="ConditionsListView"
                                              ItemsSource="{Binding alertmetadata.Conditions}"
                                              SelectionMode="None" Grid.Row="1" Grid.ColumnSpan="4" Grid.Column="0" HeightRequest="120">
                                     <CollectionView.ItemTemplate>
                                         <DataTemplate>
                                             <Grid x:DataType="model:AlertConditionEx">
                                                 <Grid.RowDefinitions>
                                                     <RowDefinition Height="Auto" />
                                                 </Grid.RowDefinitions>
    
                                                 <Grid.ColumnDefinitions>
                                                     <ColumnDefinition Width="*" />
                                                     <ColumnDefinition Width="Auto" />
                                                     <ColumnDefinition Width="*" />
                                                     <ColumnDefinition Width="Auto"/>
                                                 </Grid.ColumnDefinitions>
                                                 <Label Text="{Binding LeftItem.NS}" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" TextColor="White"/>
                                                 <Image Source="{x:Binding OS , Converter={StaticResource ImageConverter}}" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
                                                HeightRequest="40"></Image>
                                                 <Label Text="{Binding RightItem.NS}" Grid.Row="0" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" TextColor="White"/>
                                                 <Image Source="{x:Binding OS , Converter={StaticResource ChartImageConverter}}" Grid.Row="0" Grid.Column="3"
                                                HeightRequest="40"></Image>
                                             </Grid>
                                         </DataTemplate>
                                     </CollectionView.ItemTemplate>
                                 </CollectionView>
                                 <Label Text="..." TextColor="White" FontAttributes="Bold" FontSize="Large" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" IsVisible="{Binding alertmetadata.ThreeDots}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
    
                             <BoxView VerticalOptions="FillAndExpand"  HeightRequest="1" Color="#59595b" 
                                      Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4"/>
                             <!--</Frame>-->
    
                                 <Grid.GestureRecognizers>
                                     <TapGestureRecognizer
                                 NumberOfTapsRequired="1"
                                 Command="{Binding Source={RelativeSource AncestorType={x:Type local:AlertViewModel}}, Path=AlertsTapped}"       
                                 CommandParameter="{Binding .}">
                                     </TapGestureRecognizer>
                                 </Grid.GestureRecognizers>
                             </Grid>
                         </SwipeView>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
         </CollectionView>
     </RefreshView>

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
1 Vote"
JarvanZhang-MSFT answered

Hello,​

Welcome to our Microsoft Q&A platform!

My Question is when I tap on the rows onlu row=0 and row=2 is firing , not row=1 where I have Another CollectionView.

CollectionView has it's own event which may conflit with the gesture even setting SelectionMode to None. I add a tap gesture to a collectionView directly, it also doesn't work. And it's not recommended to use nested collectionView which may cause the scrolling issue. To display multi items, try using BindableLayout in collectionView's item instead and the gesture work as expected.

<StackLayout x:Name="ConditionsListView" BindableLayout.ItemsSource="{Binding DataCollection}"
            Grid.Row="1" Grid.ColumnSpan="4" Grid.Column="0" HeightRequest="120">
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
    </StackLayout.GestureRecognizers>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                ...
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Check the doc: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.