HorizontalListview inside listview :- Click on item inside HorizontalListview not working.

[viveknegi51288]

Platform (please complete the following information):

• OS: Both
• Device: iphone8
• Sdk vervion: ios 13
• Xamarin.Forms: 4.7.0

Describe the bug I have created a screen where horizontal listview created inside the ListView. I want to get click event on item inside Horizontal Listview.

To Reproduce Steps to reproduce the behavior:

1. Create Horizontal Listview inside Listview.
2. Create image inside Horizontal Listview.
3. Apply tab gesture to image , didn't work.

OR

2. Applied TapCommand="{Binding ItemCommand}" to HorizontalListView but didn't work.

Expected Behavior: - Need to call ItemCommand whenever click on image;

ListView ItemsSource="{Binding Lists,Mode=TwoWay}" x:Name="allStoryList" CachingStrategy="RecycleElement" SeparatorVisibility="None" BackgroundColor="Transparent" RowHeight="300" Margin="0,40,0,0">

                     <ListView.ItemTemplate>
                <DataTemplate>

                     <custom:ExtendedViewCell SelectedBackgroundColor="Transparent"> 
              <Grid RowDefinitions="24,250"  Padding="0" Margin="0" HeightRequest="300">

                  <Label Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontAttributes="Bold"  TextColor="{DynamicResource ColorInkBase}" FontSize="{DynamicResource FontSize9}"/>

                    <horizontalList:HorizontalListView HorizontalOptions="FillAndExpand"
                        ColumnCount="2"    ListLayout="Linear"
                            BackgroundColor="Transparent" 
                            Grid.Row="2" Grid.Column="0" 
                              CollectionPadding="8,8"
                              ItemSpacing="8"
                                                TapCommand="{Binding ItemCommand}"    
                                                  x:Name="list"
                        ItemsSource="{Binding StorList}"  >
                        <horizontalList:HorizontalListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell >
                                    <StackLayout Orientation="Vertical" Padding="0" Margin="0" VerticalOptions="FillAndExpand">

                                        <ImageButton Command="{Binding ItemCommand, Source={x:Reference PageName}}" CommandParameter="{Binding .}" Source="{Binding SlideImage, StringFormat='https://{0}'}" HorizontalOptions="FillAndExpand" Aspect="AspectFit" HeightRequest="116" WidthRequest="228">

                                            <Image.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding ItemCommand}"/>

                                            </Image.GestureRecognizers>

                                            </ImageButton>

                                        <Label HorizontalOptions="End" Margin="0,0,10,0" HorizontalTextAlignment="End"  Text="{Binding ExpiryDate}"  TextColor="{DynamicResource ColorInkLight}" FontSize="{DynamicResource FontSize1}"/>

                                         <Label Text="{Binding Title}"  MaxLines="2" TextColor="{DynamicResource ColorInkBase}" FontSize="{DynamicResource FontSize6}"/>

                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding ItemCommand}"/>

                                        </StackLayout.GestureRecognizers>

                                    </StackLayout>

                                </ViewCell>
                            </DataTemplate>
                        </horizontalList:HorizontalListView.ItemTemplate>
                    </horizontalList:HorizontalListView>

[viveknegi51288]

@roubachof please help

[roubachof]

First format properly the Xaml please :)

[viveknegi51288]

HI Please find in format.

<ListView ItemsSource="{Binding Lists,Mode=TwoWay}" x:Name="allStoryList" CachingStrategy="RecycleElement" SeparatorVisibility="None" BackgroundColor="Transparent" RowHeight="300" Margin="0,40,0,0">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <custom:ExtendedViewCell SelectedBackgroundColor="Transparent">
                            <Grid RowDefinitions="24,18,250" Padding="0" Margin="0" HeightRequest="300">
                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontAttributes="Bold" TextColor="{DynamicResource ColorInkBase}" FontSize="{DynamicResource FontSize9}" />
                                <!--<Label Grid.Row="1" Grid.Column="0" Text="{Binding" TextColor="{DynamicResource ColorInkLight}" FontSize="{DynamicResource FontSize6}"/>-->
                                <horizontalList:HorizontalListView HorizontalOptions="FillAndExpand" ColumnCount="2" ListLayout="Linear" BackgroundColor="Transparent" Grid.Row="2" Grid.Column="0" CollectionPadding="8,8" ItemSpacing="8" TapCommand="{Binding ItemCommand}" x:Name="list" ItemsSource="{Binding StorList}">
                                    <horizontalList:HorizontalListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <StackLayout Orientation="Vertical" Padding="0" Margin="0" VerticalOptions="FillAndExpand">
                                                    <ImageButton Command="{Binding ItemCommand, Source={x:Reference PageName}}" CommandParameter="{Binding .}" Source="{Binding SlideImage, StringFormat='https://{0}'}" HorizontalOptions="FillAndExpand" Aspect="AspectFit" HeightRequest="116" WidthRequest="228">
                                                        <!--<Image.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding ItemCommand}"/>
                                                </Image.GestureRecognizers>-->
                                                    </ImageButton>
                                                    <Label HorizontalOptions="End" Margin="0,0,10,0" HorizontalTextAlignment="End" Text="{Binding ExpiryDate}" TextColor="{DynamicResource ColorInkLight}" FontSize="{DynamicResource FontSize1}" />
                                                    <Label Text="{Binding Title}" MaxLines="2" TextColor="{DynamicResource ColorInkBase}" FontSize="{DynamicResource FontSize6}" />
                                                    <StackLayout.GestureRecognizers>
                                                        <TapGestureRecognizer Command="{Binding ItemCommand}" />
                                                    </StackLayout.GestureRecognizers>
                                                </StackLayout>
                                            </ViewCell>
                                        </DataTemplate>
                                    </horizontalList:HorizontalListView.ItemTemplate>
                                </horizontalList:HorizontalListView>
                            </Grid>
                        </custom:ExtendedViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Behaviors>
                    <behavior:EventToCommandBehavior EventName="ItemSelected" Command="{Binding StorySelectedCommand}" CommandParameter="{x:Reference allStoryList}" />
                </ListView.Behaviors>
            </ListView>

[roubachof]

remove TapCommand="{Binding ItemCommand}" from the horizontalList:HorizontalListView, and handle it directly from the Cell with TapCommandEffect or something.

[viveknegi51288]

Still not working :( ;( @roubachof

<?xml version="1.0" encoding="UTF-8"?>
<baseContentPage:BaseCommonPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

                                xmlns:effects="clr-namespace:Sharpnado.Presentation.Forms.Effects;assembly=Sharpnado.Presentation.Forms"
                                x:Class="HRAPPPOC.Views.AllStoriesPage" xmlns:horizontalList="clr-namespace:Sharpnado.Presentation.Forms.RenderedViews;assembly=Sharpnado.Presentation.Forms" xmlns:baseContentPage="clr-namespace:HRAPPPOC.Views" BackgroundColor="White" xmlns:custom="clr-namespace:HRAPPPOC.CustomControls" xmlns:behavior="clr-namespace:Prism.Behaviors;assembly=Prism.Forms" x:Name="PageName">
    <StackLayout  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Image Source="{DynamicResource toolbar_bottom}" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Style="{StaticResource TopContentImage}" />
        <StackLayout Margin="16,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Label Text="Stories" FontAttributes="Bold" FontSize="{DynamicResource FontSize11}" TextColor="{DynamicResource ColorInkBase}" />
            <ListView ItemsSource="{Binding Lists,Mode=TwoWay}" x:Name="allStoryList" CachingStrategy="RecycleElement" SeparatorVisibility="None" BackgroundColor="Transparent" RowHeight="300" Margin="0,40,0,0">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <custom:ExtendedViewCell SelectedBackgroundColor="Transparent">
                            <Grid RowDefinitions="24,18,250" Padding="0" Margin="0" HeightRequest="300">
                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding Title}" FontAttributes="Bold" TextColor="{DynamicResource ColorInkBase}" FontSize="{DynamicResource FontSize9}" />
                                <!--<Label Grid.Row="1" Grid.Column="0" Text="{Binding" TextColor="{DynamicResource ColorInkLight}" FontSize="{DynamicResource FontSize6}"/>-->
                                <horizontalList:HorizontalListView HorizontalOptions="FillAndExpand" ColumnCount="2" ListLayout="Linear" BackgroundColor="Transparent" Grid.Row="2" Grid.Column="0" CollectionPadding="8,8" ItemSpacing="8"  x:Name="list" ItemsSource="{Binding StorList}">
                                    <horizontalList:HorizontalListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell effects:TapCommandEffect.Tap="{Binding ItemCommand}" effects:TapCommandEffect.TapParameter="{Binding .}">
                                                <StackLayout Orientation="Vertical" Padding="0" Margin="0" VerticalOptions="FillAndExpand">
                                                    <ImageButton Source="{Binding SlideImage, StringFormat='https://{0}'}" HorizontalOptions="FillAndExpand" Aspect="AspectFit" HeightRequest="116" WidthRequest="228">

                                                    </ImageButton>
                                                    <Label HorizontalOptions="End" Margin="0,0,10,0" HorizontalTextAlignment="End" Text="{Binding ExpiryDate}" TextColor="{DynamicResource ColorInkLight}" FontSize="{DynamicResource FontSize1}" />
                                                    <Label Text="{Binding Title}" MaxLines="2" TextColor="{DynamicResource ColorInkBase}" FontSize="{DynamicResource FontSize6}" />
                                                    <!--<StackLayout.GestureRecognizers><TapGestureRecognizer Command="{Binding ItemCommand}" /></StackLayout.GestureRecognizers>-->
                                                </StackLayout>

                                            </ViewCell>
                                        </DataTemplate>
                                    </horizontalList:HorizontalListView.ItemTemplate>
                                </horizontalList:HorizontalListView>
                            </Grid>
                        </custom:ExtendedViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Behaviors>
                    <behavior:EventToCommandBehavior EventName="ItemSelected" Command="{Binding StorySelectedCommand}" CommandParameter="{x:Reference allStoryList}" />
                </ListView.Behaviors>
            </ListView>
        </StackLayout>
    </StackLayout>
</baseContentPage:BaseCommonPage> 

[roubachof]

Dont put the TapCommandEffect on the ViewCell but on the StackLayout underneath

[roubachof]

ohh and I'm not sure this:

 <ListView.Behaviors>
                    <behavior:EventToCommandBehavior EventName="ItemSelected" Command="{Binding StorySelectedCommand}" CommandParameter="{x:Reference allStoryList}" />
</ListView.Behaviors>

Will play nicely with inner items being tap... Anyway this is not a HorizontalListView issue, but your layout tapped events seem to overlap

[viveknegi51288]

Yes, actually as per the design I need to use HorizontalListView inside ListView and I want click event on item inside HorizontalListView.

[roubachof]

To disable Highlight color just do this: https://docs.microsoft.com/en-US/xamarin/xamarin-forms/user-interface/listview/interactivity#disable-selection

[viveknegi51288]

@roubachof I have tried with your solution but still click event not raised ItemCommand.. Can you please help...

`

`

[viveknegi51288]

@roubachof Please help

[roubachof]

you are doing something wrong I don't know why. I'm using TapCommandEffect everywhere in the Silly! app. Please have a look here: https://github.com/roubachof/Xamarin-Forms-Practices/blob/master/SillyCompany.Mobile.Practices/Presentation/Views/TabsLayout/GridView.xaml

[viveknegi51288]

actually the problem is I am using Horizontalview inside the Listview.... And I am not able to raise click event on Horizontal listview.. @roubachof

[roubachof]

did you try using it inside a CollectionView instead of a ListView ?

[roubachof]

anyway gimme a repro sample a I will try it.

[viveknegi51288]

HorizontalVerticalList.zip Hi @roubachof Please check and provide the solution please

[viveknegi51288]

@roubachof I have tried the same with Listview instead of Collection view but the issue is the same, I want to raise click event on horizontal list item

[roubachof]

You need to install the package in each project, not just the core one. Then you have to call the initialization code on iOS and Android.

[roubachof]

closing as this issue is sleepy