locked
How to add 2 rows of images using collectionview RRS feed

  • Question

  • User387015 posted

    l have a row of images created using collectionview as per the code below.

    <CollectionView ItemsSource="{Binding sliders}" 
                HorizontalOptions="CenterAndExpand" HeightRequest="150" >
    <CollectionView.ItemsLayout>
        <ListItemsLayout>
            <x:Arguments>
                <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
            </x:Arguments>
        </ListItemsLayout>           
     </CollectionView.ItemsLayout>        
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid BackgroundColor="#282626" Padding="0,5,0,0" >
                <Grid.RowDefinitions >
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                    <Image Source="{Binding Url}"
                       Aspect="AspectFill"
                       HeightRequest="160"
                       WidthRequest="160" 
                       Grid.Row="0"
                       VerticalOptions="CenterAndExpand"
                       HorizontalOptions="CenterAndExpand"/>
                    <Label Text="{Binding Name}" TextColor="White" />       
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    

    How can l add another row of images and label to the row.the images has to be different.Kindly view the attached image to get a picture of what l want to achieve.Please help

    Monday, July 15, 2019 2:58 PM

Answers

  • User369979 posted

    Another row should be another collection view. You can use a vertical scroll view wrap your content like:

    <ScrollView>
        <StackLayout>    
            <!-- More controls -->
            <CollectionView ItemsSource="{Binding sliders}" orizontalOptions="CenterAndExpand" HeightRequest="150" >
                <!-- ... -->
            </CollectionView>
    
            <CollectionView ItemsSource="{Binding sliders}" HorizontalOptions="CenterAndExpand" HeightRequest="150" >
                <!-- ... -->
            </CollectionView>
    
            <!-- More controls -->
        </StackLayout>
    </ScrollView>
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 16, 2019 9:55 AM

All replies

  • User369979 posted

    Another row should be another collection view. You can use a vertical scroll view wrap your content like:

    <ScrollView>
        <StackLayout>    
            <!-- More controls -->
            <CollectionView ItemsSource="{Binding sliders}" orizontalOptions="CenterAndExpand" HeightRequest="150" >
                <!-- ... -->
            </CollectionView>
    
            <CollectionView ItemsSource="{Binding sliders}" HorizontalOptions="CenterAndExpand" HeightRequest="150" >
                <!-- ... -->
            </CollectionView>
    
            <!-- More controls -->
        </StackLayout>
    </ScrollView>
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, July 16, 2019 9:55 AM
  • User387015 posted

    @LandLu Perfect answer.. Thanks exactly what l am looking for..l have a follow up question though..How do l add a gradient to the collectionview..say only the first collectionview in the above code

    Tuesday, July 16, 2019 10:22 AM
  • User369979 posted

    @Austy What do you mean gradient? Do you want the center item of the collection to be displayed with a larger size? If so, you have to customize the layout.

    Tuesday, July 16, 2019 10:24 AM
  • User387015 posted

    @Landlu ..yes l would want the center item of the collection to be displayed with a larger size while the collection is scrolling and l also want the collection background color to be a linear gradient like in the image below..The circled part has a gradual change in background color from dark to lighter shader of gray.Please help l am new to xamarin and learning by doing a project thanks

    Tuesday, July 16, 2019 10:43 AM