Forum Xamarin Xamarin.Forms

ListView Height with content loaded from the Web

windywindy FRMember
edited April 2017 in Xamarin.Forms


I'm trying to create a full Xamarin.Forms application (100% shared code), with a simple ListView that displays :

  • On the left: an username with its profile picture
  • On the right: a content with an optional picture
    All data is coming from an API.

UWP and Android apps handle the display correctly but on iOS I'm failing to set the (dynamic) height fine.
Please find below the current XAML code I have:
<ListView HasUnevenRows="True" ItemsSource="{Binding Data}" ItemSelected="ListView_ItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout> <!-- Fixes size pretty well --> <StackLayout Margin="5" VerticalOptions="FillAndExpand"> <Grid HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand"> <Grid.ColumnDefinitions> <ColumnDefinition Width="120" /> <!-- Left part will always be smaller than 120 --> <ColumnDefinition Width="auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <StackLayout Orientation="Vertical" Grid.Column="0"> <Label Text="{Binding User.Name}" HorizontalTextAlignment="Center" /> <Image Source="{Binding User.Avatar.Uri}" /> <Button Text="See profile" Command="{Binding Source={x:Reference MainContentPage}, Path=BindingContext.ProfileCommand}" CommandParameter="{Binding User}"/> </StackLayout> <StackLayout Grid.Column="2"> <Label Text="{Binding Text}" /> <Image Source="{Binding Attached_Image.Uri}" /> </StackLayout> </Grid> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>

The code-behind only fetches data from the API and setting it to a ViewModel that I use to populate the ListView and handle the Command.

Problem is: Height of some ListViewItem is not set correctly and thus items are colliding.
Find below a quick list of what I tried:

  • Use a web client to download synchronously image bytes are bind the Image Source to it
  • Use a custom listview and call ForceUpdateSize in the SetupContent method
  • Use FillAndExpand instead of StartAndExpand
  • Change the XAML part, I created as you can see StackLayouts in StackLayouts with various events subscription like OnAppearing, OnSizeChanged etc.

I couldn't find any "Loaded" event on pictures to update the ListViewItem size. I also tried to do all the work synchronously and render the ListView later, but it's not enough, Image controls loads their Source asynchronously.

Along my tests, I did have some results, but never enough. For example, ForceUpdateSize called in the SetupContent method resize items correctly, but induces some scrolling noises that creates a lot of confusion while browsing.

Additional information:

  • The ListView is rendering 30 items
  • I use Xamarin.Forms
  • I deploy the App both on an iPad and the iPhone simulator

Many thanks for your time.

Sign In or Register to comment.