Xamarin forms listview - show images full widh, auto height - xamarin

Question

I have a listview in Xamarin Forms and I have a requirement to maintain aspect ratio but also this:
When an image is taller than it is wide, show the image flush to the left and right with no margins, have the height be auto
When an image is wider than it is tall, the requirement is the same, but this works. In the screenshot it shows how images currently render when they're taller than wide. Changing the aspect property breaks the condition when it is wider than tall. When I copy this template into a blank page, the image displays fine. I think the issue is being able to set the height of each row in the listview to auto. It may not be the issue though. I'm using a SyncFusion listview for Xamarin
Here is the code for the item template of the listview:
<DataTemplate>
<ViewCell>
<StackLayout Margin="0,10,0,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Card Header -->
<!-- Truncated for brevity -->
</Grid>
<StackLayout Grid.Row="1">
<!-- Card title -->
<!-- Truncated for brevity -->
</StackLayout>
<!-- Card Body -->
<StackLayout BindingContextChanged="PostImageStackLayout_BindingContextChanged">
<Grid Grid.Row="2" x:Name="postImageStackLayout" Margin="0,15,0,10">
<!-- Card article image -->
<ffimageloading:CachedImage Grid.Row="0" x:Name="postImage" CacheDuration="1" HeightRequest="300"
Source="{Binding MainIMageURL}" BindingContextChanged="PostImage_BindingContextChanged"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
Margin="0,10,0,10" FadeAnimationEnabled="True" Aspect="AspectFit" >
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="PostImageTapped" CommandParameter="{Binding }"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</StackLayout>
<!--Likes and comment count-->
<!-- Truncated for brevity -->

Answer 1

Don't put fix height on Grid Row where it have the image element. You can use the "auto" value.
<RowDefinition Height="auto"/>
and change the Aspect to
AspectFill
I use the collectionview from the latest Xamarin.Forms 4.3. Here is my sample code
xaml
<ContentView.Content>
<StackLayout>
<CollectionView x:Name="ImagesCollectionView">
<CollectionView.ItemsLayout>
<ListItemsLayout ItemSpacing="20">
<x:Arguments>
<ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
</x:Arguments>
</ListItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
Source="{Binding .}"
Aspect="AspectFill"
LoadingPlaceholder="noimg.png"/>
<Label Text="label"
TextColor="Gray"
Opacity="0.8"
Margin="12,0,0,0"
HorizontalOptions="Start"
FontSize="Small"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentView.Content>
c#
public MySecondView()
{
InitializeComponent();
ImagesCollectionView.ItemsSource = new List<string>()
{
"http://insidetema.com/wp-content/uploads/2018/05/170717100550_1_900x600.jpg"
,"https://informationng.com/wp-content/uploads/2014/03/bigstock_Happy_Business_People_With_Han_4049346.jpg"
,"http://www.blt.co.uk/wp-content/uploads/2018/03/Happy-Places.jpg"
};
}
Output

Answer 2

You can set the HeightRequest and WidthRequest of your image to -1 (then it'll fit all the space available)