Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to implement Horizontal ListView inside Vertical ListVIew ?

VIVEKNEGIVIVEKNEGI USMember ✭✭✭

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?

Best Answer

Answers

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭

    Design added, anyone can help?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited August 18

    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

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭

    @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 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.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding ItemClickCommand}"/>
                                    </Grid.GestureRecognizers>
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
    
                </StackLayout>
    
    
            </DataTemplate>
        </CollectionView.ItemTemplate>
    
    </CollectionView>
    

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

  • ColeXColeX Member, Xamarin Team Xamurai

    TabGesture works perfectly .

    Check my sample below

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭

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

  • VIVEKNEGIVIVEKNEGI USMember ✭✭✭

    Thanks @ColeX appreciate your efforts. :)

Sign In or Register to comment.