ListView and CollectionView are taking extra space than the required space in Xamarin Forms

Question

I am having a string[] array that displays items using Label . I am using a ListView for this purpose. It is working fine, the only problem is that the ListView is taking extra space than that is required. I have also tried with CollectionView but the same problem persists.

Please note that my ListView is under ScrollView . I want to have Scrollable content on my page, that also contains a List.

I initially wanted to display array of items with just Label without ListView or CollectionView .

Answer 1

There are 2 questions here

• ListView or CollectionView is using extra space.
• How to display a small array of items without ListView or CollectionView ?

There is one solution to both the problems. Use a Layout such as StackLayout and set its BindableLayout.ItemsSource to your array, list or collection. Then Define its ItemTemplate .

Here is the sample code:

<StackLayout BindableLayout.ItemsSource="{Binding Fruits}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding .}" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Define your Array as in View or ViewModel (ViewModel is recommended):

public string[] Fruits { get { return new string[] { "Mango", "Apple", "Orange", "Pineapple", "Grapes" }; }}

Answer 2

There is an easier way to achieve this .

Just use Label without any Layout .

<Label x:Name="label"/>

---

Basic

We can add \\n manually to make the label multiple lines.

 string text = "";

 foreach(var str in Fruits)
 {
    text += str + "\n";
 }
 label.Text = text;

---

Custom

To style the label we can use FormattedText .

FormattedString text = new FormattedString();
foreach(var str in Fruits)
{
   Span sp = new Span();
   sp.Text = str + "\n";
   sp.FontSize = 20;
   sp.LineHeight = 3;
   sp.TextColor = Color.Red;

   text.Spans.Add(sp);
}
label.FormattedText = text;