locked
How to implement Horizontal ListView inside Vertical ListVIew ? RRS feed

  • Question

  • User277514 posted

    Hi All, I need to create a screen having horizontal list inside vertical listview in xamarin forms

    I am able to display the items properly but I need a click event on horizontal list (inner list) item.

    Can anyone help ? or any other approach to create below design?

    Monday, August 17, 2020 10:52 PM

Answers

  • User369978 posted

    ItemClickCommand should be placed into HorizontalList class not MainPageViewModel class .

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, August 18, 2020 6:40 AM

All replies

  • User277514 posted

    Design added, anyone can help?


    Monday, August 17, 2020 11:31 PM
  • User369978 posted

    Here is an excellent sample you could refer to .

    If you don't want to use third-party plugin(Syncfusion) , the implementation is also pretty easy.

    Just place a Horizontal CollectionView into a Vertical CollectionView .

    For example

    <CollectionView ItemsSource="{Binding List}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Title}" FontSize="30"/>
    
                    <CollectionView ItemsSource="{Binding Monkeys}" HeightRequest="100">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout   Orientation="Horizontal" />
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Grid Padding="10">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="35" />
                                        <RowDefinition Height="35" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="70" />
                                        <ColumnDefinition Width="140" />
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.RowSpan="2" 
                               Source="{Binding ImageUrl}" 
                               Aspect="AspectFill"
                               HeightRequest="60" 
                               WidthRequest="60" />
                                    <Label Grid.Column="1" 
                               Text="{Binding Name}" 
                               FontAttributes="Bold"
                               LineBreakMode="TailTruncation" />
                                    <Label Grid.Row="1"
                               Grid.Column="1" 
                               Text="{Binding Location}"
                               LineBreakMode="TailTruncation"
                               FontAttributes="Italic" 
                               VerticalOptions="End" />
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
    
                </StackLayout>
    
    
            </DataTemplate>
        </CollectionView.ItemTemplate>
    
    </CollectionView>
    

    Output

    Tuesday, August 18, 2020 2:48 AM
  • User277514 posted

    @ColeX Thanks for the sample but the problem is with the click event.. I am not able to raise a click event on inner list item.?

    ```

                <CollectionView ItemsSource="{Binding Monkeys}" HeightRequest="100">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout   Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid Padding="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="35" />
                                    <RowDefinition Height="35" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70" />
                                    <ColumnDefinition Width="140" />
                                </Grid.ColumnDefinitions>
                                <Image Grid.RowSpan="2" 
                           Source="{Binding ImageUrl}" 
                           Aspect="AspectFill"
                           HeightRequest="60" 
                           WidthRequest="60" />
                                <Label Grid.Column="1" 
                           Text="{Binding Name}" 
                           FontAttributes="Bold"
                           LineBreakMode="TailTruncation" />
                                <Label Grid.Row="1"
                           Grid.Column="1" 
                           Text="{Binding Location}"
                           LineBreakMode="TailTruncation"
                           FontAttributes="Italic" 
                           VerticalOptions="End" />
     <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding ItemClickCommand}"/>
                                </Grid.GestureRecognizers>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
    
            </StackLayout>
    
    
        </DataTemplate>
    </CollectionView.ItemTemplate>
    

    ```

    TabGesture is not working... can you try at your end and let me know please

    Tuesday, August 18, 2020 4:51 AM
  • User369978 posted

    TabGesture works perfectly .

    Check my sample below

    Tuesday, August 18, 2020 5:18 AM
  • User277514 posted

    @ColeX I have attached a repo , please check still not resolved

    Tuesday, August 18, 2020 5:39 AM
  • User369978 posted

    ItemClickCommand should be placed into HorizontalList class not MainPageViewModel class .

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, August 18, 2020 6:40 AM
  • User277514 posted

    Thanks @ColeX appreciate your efforts. :)

    Tuesday, August 18, 2020 11:29 AM