Forum Xamarin Xamarin.Forms

How to add 2 rows of images using collectionview

AustyAusty Member ✭✭✭
edited July 2019 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" >
        <Grid BackgroundColor="#282626" Padding="0,5,0,0" >
            <Grid.RowDefinitions >
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <ColumnDefinition Width="Auto" />
                <Image Source="{Binding Url}"
                <Label Text="{Binding Name}" TextColor="White" />       

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


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