ffimageloading:CachedImage 图像不适合网格

如何解决ffimageloading:CachedImage 图像不适合网格

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>

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

解决方法

Result

试试这个代码：

<StackLayout>
        <Label Text=" Product Detail" Padding="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">
            <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>

,

问题是由您设置的 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>