时间戳

首页 > 解决方案 > 为什么 Android 对待下载的图像与嵌入的图像不同

xaml - 为什么 Android 对待下载的图像与嵌入的图像不同

问题描述

我有 3 张图片。它们都是圆形的（实际上是带有透明背景的方形），并且都是 3 个完全相同的大小。

我希望以下 xaml 生成 3 个外观相似的图像，由于 AspectFill，所有图像都被拉伸到容器的最大值，保持它们的纵横比。

这适用于 UWP，但在 Android 上，只有第一个图像似乎想听我的计划。我能找到的唯一区别是第一个图像是嵌入式资源，而其他图像是下载的。（它们不是直接从url显示，而是先存储在本地）

如果我只显示下载的图像，它们都显示为“小”。如果我只显示嵌入的图像，它们都显示为“大”。

在我看来，Android 在应用 Aspect 时处理下载的图像与嵌入图像不同，但我不知道为什么。

    <ScrollView Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <Grid>
            <StackLayout x:Name="NarrationsStackLayout" BindableLayout.ItemsSource="{Binding Narrations}" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Fill">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding NarrationImage}" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Green"  >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding TapCommand}" />
                            </Image.GestureRecognizers>
                        </Image>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </Grid>
    </ScrollView>

什么可能导致这种行为？

在此处输入图像描述

标签： xamlxamarindatatemplateaspect-fit

解决方案

在 Leo Zhu 的建议下，我有一个有效的解决方法来解决我的问题，但我仍然对原因感到困惑。

<StackLayout x:Name="NarrationsStackLayout" BindableLayout.ItemsSource="{Binding Narrations}" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Fill" Margin="0" Padding="0">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding NarrationImage}" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Green" 
                                   HeightRequest="{Binding Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackLayout }}, Path=Height}"  
                                   WidthRequest="{Binding Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackLayout }}, Path=Height}">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding TapCommand}" />
                                </Image.GestureRecognizers>
                            </Image>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>

推荐阅读