如何在collectionview中制作方形图像答案

【问题标题】：How to make square images in collectionview如何在collectionview中制作方形图像
【发布时间】：2021-02-22 20:32:00
【问题描述】：

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

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

我想要什么

我有什么

请帮我把它们弄成方形

【问题讨论】：

docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/… ?
如果源图像不是方形的，你想裁剪它，还是压扁它，或者信箱它，还是什么？您是否尝试过设置图像控件的宽度和高度？还是将源图像编辑为方形？
我尝试分配图像的高度和宽度，但它不起作用。我想制作一个方形图像，如果源图像不是方形的，请裁剪它，但制作方形跨度>

标签： c# xaml xamarin xamarin.forms xamarin.android

【解决方案1】：

你需要设置图片的纵横比：

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

【讨论】：

【解决方案2】：

您可以使用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>

我的测试图片：

这是代码运行结果

【讨论】：

@Masha0307 这个问题有更新吗？如果回复有帮助，请采纳为答案（点击此答案左上角的“✔”），对有类似问题的其他人有帮助