xamlxamarindatatemplateaspect-fit

Why does Android treat downloaded images differently than embedded images


I have 3 images. They are all round (actually square with a transparant background) and are all 3 of the exact same size.

I would exepect the following xaml to produce 3 similar looking images, all streched to the max of the container keeping their aspect ratio because of AspectFill.

This works fine for UWP, but on Android only the fist image seems to want to listen to my plans. The only difference I can find is that the first image is an embedded resource, and the other images are downloaded. (they are not displayed directly from the url, but first stored locally)

If I only display downloaded images, they all are shown 'small'. If I only display embedded images, they all are shown 'big'.

It seems to me that Android treats downloaded images differently when applying Aspect than embedded images but I can't figure out why.

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

What could be causing this behaviour?

enter image description here


Solution

  • With the suggestion of Leo Zhu I have a valid workaround for my problem, but I'm stil puzzled by the cause.

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