MikePR MikePR - 2 months ago 33
C# Question

ListView not rendering properly using Xamarin Forms

It has been a while, since the last time I did some development for mobile. Now, I'm trying to refresh my knowledge using Xamarin Forms.

I created a Xamarin Froms project. However, I'm having some problems to render a collection of data into a ListView Content. I can only see the first element of tree Labels.

This is the XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ExampleBooks.View.BooksView"
Title="Books">

<ScrollView>
<StackLayout>
<ListView x:Name="ListViewBooks"
ItemsSource="{Binding Books}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="10" Orientation="Vertical">
<Label Text="{Binding Title}" FontSize="Large" VerticalOptions="Center"></Label>
<Label Text="{Binding Author}" FontSize="Small"></Label>
<Label Text="{Binding Description}" FontSize="14"></Label>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</ContentPage>


And this is the screenshot of how the data using the above code is rendered:

Screenshot ListView

As you can see, the Labels for Autor and Description don't displayed. As far I as know, all tree elements inside the nested StackLayout in the ListView should be displayed. However, I can only see the fist one.

I have try playing around with the Padding and Spacing attributes. But, none of them seems to help.

Do I missing something here? Any help/clue would help.

P.D. I'm using an Android Emulator. However, the same is happening in a Windows Phone emulator.

Thanks

Answer

Increase your ListView row height:

<ListView x:Name="ListViewBooks"
          ItemsSource="{Binding Books}"
            RowHeight="100">

enter image description here