如何在CollectionView中制作方形图像

问题描述

请帮忙。我尝试制作方形图像，但我做不到，也不明白为什么（

     <CollectionView   ItemsSource="{Binding Types}"      
              SelectionMode="None">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Horizontal" HorizontalItemSpacing="10"
          />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>

                        <Grid >
                            <Grid.RowDeFinitions>
                                <RowDeFinition Height="150" />
                             </Grid.RowDeFinitions>
                            <Grid.ColumnDeFinitions>
                                <ColumnDeFinition Width="150" />
                            </Grid.ColumnDeFinitions>
                            <Image   Source="{Binding Image}"/>
                            <Label  Text="eiffel" TextColor="Red" FontFamily="Roboto" HorizontalOptions="Start" VerticalOptions="End" FontAttributes="Bold"></Label>
                              </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

我想要的

我有什么

请帮助我使它们变方形

解决方法

您需要设置图像的外观：

<Image   Source="{Binding Image}" Aspect="AspectFill"/>

,

您可以使用FFImageLoading来做到这一点。将以下NuGet软件包添加到解决方案中的每个项目中。

Xamarin.FFImageLoading

Xamarin.FFImageLoading.Forms

Xamarin.FFImageLoading.Transformations (if you’ll use transformations like CircleTransformation)

将WidthRequest和HeightRequest设置为相同的值。 使用以下代码来实现它

 <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
            WidthRequest="200" HeightRequest="200"
            DownsampleToViewSize="true"
            Source = "test2.jpg">

            <ffimageloading:CachedImage.Transformations>
                <fftransformations:CornersTransformation  CornersTransformType="AllRounded" BottomLeftCornerSize="8" BottomRightCornerSize="8" TopLeftCornerSize="8" TopRightCornerSize="8"/>
            </ffimageloading:CachedImage.Transformations>
        </ffimageloading:CachedImage>

我的测试图像：

这是代码运行结果