How to add 2 rows of images using collectionview

AustyAusty Member ✭✭✭
edited July 16 in Xamarin.Forms

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

Best Answer

Answers

  • AustyAusty Member ✭✭✭

    @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

  • LandLuLandLu Member, Xamarin Team Xamurai

    @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.

  • AustyAusty Member ✭✭✭

    @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

Sign In or Register to comment.