列表视图xamarin表单内网格内的图像问题答案

【问题标题】：problem with image inside grid inside list view xamarin forms列表视图xamarin表单内网格内的图像问题
【发布时间】：2020-07-17 18:49:38
【问题描述】：

我正面临一个真正奇怪的问题，我正在开发一个 xamarin 表单应用程序，让我向您展示这个问题：

所以我有这个包含项目的列表视图。 click here to see the list
然后我点击了一个项目，这会触发 Navigation.PushAsync 到 this page
然后，当我回到列表时，图像大小发生了变化，watch this image

我尝试将列表视图更改为集合视图，但问题是一样的。我在 android 上部署这个应用程序

这是 xaml 代码

                <StackLayout Margin="10,0,10,0">
                <ListView x:Name="lvResultadoBusqueda" SelectionMode="Single"  ItemSelected="lvResultadoBusqueda_ItemSelected" ItemTapped="lvResultadoBusqueda_ItemTapped" HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#FFFFFF" Padding="0,5,0,5">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="15"/>
                                        <RowDefinition Height="15"/>
                                        <RowDefinition Height="15"/>
                                        <RowDefinition Height="10"/>
                                    </Grid.RowDefinitions>
                                    <Frame Padding="0" OutlineColor="#E4E7EC" HasShadow="True" Grid.RowSpan="4" Grid.Column="0">
                                        <Image Source="{Binding urlImagenPortada}" Aspect="Fill"></Image>
                                    </Frame>
                                    <Label Text="{Binding titulo}" Grid.Row="0" Grid.Column="1" FontSize="14" TextColor="#000000" FontAttributes="Bold"></Label>
                                    <Label Text="{Binding autores}" FontSize="12" Grid.Row="1" Grid.Column="1" TextColor="#868b8f"></Label>
                                    <StackLayout Grid.Row="2" Grid.Column="1" Orientation="Horizontal" Spacing="5" BackgroundColor="Transparent">
                                        <Label Text="{Binding valoracionExacta}" FontSize="12" TextColor="#868b8f" BackgroundColor="Transparent"></Label>
                                        <Image Source="star_blue.png" WidthRequest="10" HeightRequest="10"  Margin="0,4,0,0"></Image>
                                    </StackLayout>
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>

这是c#代码

        private void lvResultadoBusqueda_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        ListView listView = (ListView)sender;
        listView.SelectedItem = null;
    }

    private void lvResultadoBusqueda_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        var item = e.Item as BuscarCatalogoVM;
        if (item != null)
        {
            Navigation.PushAsync(new Catalogo.DetalleCatalogo(item.idRepositorioDigital));
        }
    }

我真的希望你能帮助我，谢谢！

更新 1：我尝试了 Ryan 告诉我的内容：

    <Frame Padding="0" OutlineColor="#E4E7EC" HasShadow="True" Grid.RowSpan="4" Grid.Column="0">
            <Image Source="{Binding urlImagenPortada}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"></Image>
     </Frame>

还有this is the screenshot :C

更新 2：使用 FFImageLoading 插件，我没有这个问题，它工作得很好，但似乎 DownsampleToViewSize 属性不起作用，当我将它设置为 true 时，the image does not fit，所以我必须把它设置为 false并添加 Aspect="Fill" 或 Aspect="AspectFill"，但是这个解决方案 cuts the image of the book

【问题讨论】：

标签： xamarin.forms

【解决方案1】：

来自秘鲁的朋友尝试使用 Xamarin.FFImageLoading.Forms https://askxammy.com/optimizing-handling-images-with-ffimageloading/ 还我共享此链接以管理转换。 https://geeks.ms/jsuarez/2019/05/29/xamarin-forms-ui-challenge-art-news-transiciones-entre-paginas/

你可以在git中分享代码，我正在调试项目试图帮助你。

【讨论】：

嗨 Piova，其实我是用这个插件来展示用户照片的圆形变换，太棒了！，我只是尝试使用此插件也显示书籍，但似乎 DownsampleToViewSize="true" 不起作用，图像不适合：C，我将发布屏幕截图。另一方面，导航过渡教程很棒，谢谢！

【解决方案2】：

  <Frame Padding="0" OutlineColor="#E4E7EC" HasShadow="True" Grid.RowSpan="4" Grid.Column="0">
        <Image Source="{Binding urlImagenPortada}" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
  </Frame>

添加HorizontalOptions="FillAndExpand"和VerticalOptions="FillAndExpand"

【讨论】：

嗨瑞恩，谢谢你的帮助，我试过了，但图像大小仍在变化：C，并且图像没有垂直填充框架，所以顶部有一个空白区域底部：C。我要发截图
图像的拉伸减少了，所以这是一个胜利哈=），尝试恢复到AspectFill，并添加verticalOptions="FillAndExpand"