ffimageloading：CachedImage 图像不适合网格答案

【问题标题】：ffimageloading:CachedImage image not fitting gridffimageloading：CachedImage 图像不适合网格
【发布时间】：2020-12-20 20:10:14
【问题描述】：

enter image description here

关于如何让我的图像适合网格的任何建议？下面是我的代码。

      <Grid   HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand">
          <Grid.ColumnDefinitions>
           <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition  Height="Auto" />
                        </Grid.RowDefinitions>
                        <ffimageloading:CachedImage 
                            x:Name="mainImage"  
                            Source="{Binding Image1}" 
                            LoadingPlaceholder= "LoaderImage"
                            ErrorPlaceholder= "{Binding Image2}"
                            CacheDuration= "50"
                            RetryCount= "3"
                            RetryDelay= "600"
                            DownsampleToViewSize = "true"                               
                            Grid.Column="0" 
                            WidthRequest="380" 
                            HeightRequest="380" 
                            Aspect="AspectFit">
                            <ffimageloading:CachedImage.Transformations>
                                <fftransformations:RoundedTransformation Radius="20"/>
                            </ffimageloading:CachedImage.Transformations>
                        </ffimageloading:CachedImage>
                    </Grid>

关于如何让我的图像适合网格的任何建议？

【问题讨论】：

标签： xaml xamarin xamarin.android xamarin.ios app.xaml

【解决方案1】：

Result

试试这个代码：

<StackLayout>
        <Label Text=" Product Detail" Padding="10, 10, 10, 0"/>
        <StackLayout Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Frame HasShadow="False" VerticalOptions="Fill" CornerRadius="5" Padding="1" BackgroundColor="#000000">
            <Frame HasShadow="False" CornerRadius="5" BackgroundColor="White" Padding="0">
                <Grid Padding="10, 0, 10, 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="7*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
                    <Label Text="Jeep Rubicon" Grid.Row="0"/>
            <ffimageloading:CachedImage
                Grid.Row="1"
                x:Name="mainImage"
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
            <StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="20">
                <ffimageloading:CachedImage
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>

                <ffimageloading:CachedImage
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>

                <ffimageloading:CachedImage
                Source="https://www.gannett-cdn.com/presto/2020/09/02/PDTN/f135eddc-5024-42ed-99e5-3f11ca3a5a7e-jeep_close.jpg"
                LoadingPlaceholder= "LoaderImage"
                CacheDuration= "50"
                RetryCount= "3"
                RetryDelay= "600"
                DownsampleToViewSize = "true"
                Aspect="AspectFit">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:RoundedTransformation Radius="20"/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
            </StackLayout>
            </Grid>
            </Frame>
        </Frame>
            </StackLayout>
    </StackLayout>

【讨论】：

图像仍然在宽度上切割

【解决方案2】：

问题是由你设置的WidthRequest="380"和HeightRequest="380"引起的。

图片的高度大于宽度。

所以给一个适当的 WidthRequest 和 HeightRequest 将解决这个问题：

 WidthRequest="320" 
 HeightRequest="480"

更新：

<Grid   HorizontalOptions="FillAndExpand"
       VerticalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition  Height="Auto" />
    </Grid.RowDefinitions>
    <ffimageloading:CachedImage  BackgroundColor="Red"
                        x:Name="mainImage"  
                        Source="logo.jpg" 
                        CacheDuration= "50"
                        RetryCount= "3"
                        RetryDelay= "600"
                        DownsampleToViewSize = "true"                               
                        Grid.Column="0" 
                                                                    
        Aspect="AspectFit">

    </ffimageloading:CachedImage>
</Grid>

【讨论】：

这并没有解决问题。它仍在切割，高度大于宽度
将width 更改为* 并删除WidthRequest 和HeightRequest。请参阅我的更新答案。