Коллекция форм Xamarin с квадратными изображениями

Question

Я хочу отобразить список изображений в виде сетки с несколькими строками (2 или 4) с формами Xamarin.Каждая ячейка сетки должна быть квадратной.Я использую CollectionView с вертикальной компоновкой, требуемым диапазоном и фиксированным параметром HeightRequest в DataTemplate.Я получаю многоколоночную сетку, но не могу сделать квадраты (ячейки) изображениями.

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

Answer 1

Не используйте <Image></Image> в качестве корневого макета в DataTemplate.Вместо этого используйте один из элементов управления Layout (StackLayout, AbsoluteLayout и т. Д.) Или ContentView, а затем примените некоторые стили или все, что вы предпочитаете, к этому корневому макету вашего CollectionView.

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

Answer 2

Благодаря другим ответам, я закончил с пользовательским ContentView, установив HeightRequest равным Width и изображению внутри него.

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

и 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>

Answer 3

Я воспроизвел небольшой образец.

Единственное, что я добавил, - это обернул изображение в просмотре контента, применил отступ (который можно игнорировать)

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