Xamarin Forms CollectionView with square images

1
votes

I want to display list of images as a grid with several rows (2 or 4) with Xamarin Forms. Each cell of the grid must be square. I'm using CollectionView with vertical layout, required span and fixed HeightRequest in DataTemplate. I get multicolumn grid, but I cannot make images (cells) to be squared.

<CollectionView ItemsSource="{Binding .}">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Image
                        HeightRequest="100"
                        x:Name="imageCell"
                        Aspect="AspectFill"
                        Source="{Binding .}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
3
xamarinxamarin.formscollectionview
Set the WidthRequest equal to your HeightRequest – SushiHangover
@SushiHangover cell width has to be equal to the half (one fourth) of the page. Should I calculate it in runtime and pass to the data template from view model? – Vlad Bilyk

3 Answers

4
votes

Thanks to another answers, I've ended up with custom ContentView setting up HeightRequest equal to Width and the image inside it.

    public class SquareView : ContentView
    {
        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            HeightRequest = Width;
        }
    }

and XAML

<CollectionView
                ItemsSource="{Binding .}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout
                        Orientation="Vertical"
                        Span="2" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <views:SquareView>
                            <Image
                                HeightRequest="20"
                                Aspect="AspectFill"
                                Source="{Binding .}" />
                        </views:SquareView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
0
votes

I've reproduced a small sample.

Only thing I added was to wrap the image inside a contentview, to apply a padding (which you can ignore)

 <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="2" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <ContentView Padding="0">
                    <Image Source="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzJUY4JZTX9oYsSl1jclFvdsoXhtA0AfxqKkYX2P81Qb3cyX9o"
                           HeightRequest="150"
                           Aspect="AspectFill"
                           />
                        </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

enter image description here

0
votes

Don't use <Image></Image> as your root layout in DataTemplate. Instead, use one of the Layout controls (StackLayout, AbsoluteLayout etc.) or ContentView and then apply some styles or whatever you prefer to this root layout of your CollectionView.

<DataTemplate>
   <StackLayout>
      <Image
         HeightRequest="100"
         x:Name="imageCell"
         Aspect="AspectFill"
         Source="{Binding .}" />
   </StackLayout>
</DataTemplate>