Xamarin.Forms ListView with an AutoSize height

Question

I've read many stackoverflow articles to find out how to set height of the ListView so that the ListView is exactly as high as is its content. But none of the many answer solve my needs.

I tried to adapt the basiclist sample in https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/workingwithlistview/ with this code

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <ScrollView>
                <StackLayout>
                    <StackLayout VerticalOptions="StartAndExpand">
                        <Label Text="Hallo"/>
                    </StackLayout>
                    <StackLayout VerticalOptions="StartAndExpand" >
                        <ListView x:Name="listView" BackgroundColor="Green" VerticalOptions="Start"
                              ItemsSource="{Binding .}" >
                            <ListView.Footer>
                                <Label />
                            </ListView.Footer>
                        </ListView>
                    </StackLayout>
                    <StackLayout>
                        <Label Text="Hallosdf"/>
                    </StackLayout>
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </AbsoluteLayout>

but no matter what I do, all results in a list thats too high. The green element is the oversized listview. All content below the listview is outside of the viewport.

Thanks a lot. Uwe

Answer 1

Ahhh, its the RowHeight that matters. I have no uneven rows and therefore I can set the RowHeight.

<StackLayout Orientation="Vertical"
             VerticalOptions="Fill"
             HorizontalOptions="StartAndExpand">
    <ListView VerticalOptions="FillAndExpand"
              RowHeight="<some row height>">
    </ListView>
</StackLayout>

Answer #7 found in Xamarin.Forms: ListView inside StackLayout: How to set height?

Thanks a lot

Answer 2

The problem is, that you have nested 2 scroll views with the same direction into each other (ScrollView and ListView) without one having a fixed height.

Solution if you want the ListView to shrink to it's contents: Remove the ListView

There is a BindableLayout that can be used with StackLayout and other layouts. (https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts)

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <StackLayout >
            <Label Text="Hallo"/>
            <StackLayout BindableLayout.ItemsSource="{Binding .}" BackgroundColor="Green">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding .}"/> 
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
            <Label Text="Hallosdf"/>
        </StackLayout>
    </ScrollView>
</AbsoluteLayout>

Solution if you want the ListView to stretch: Remove the Scrollview

The Hallosdf Label will be shown below the ListView and only the ListView will scroll. Btw: You don't need to wrap every view in a StackLayout. Try to avoid unnecessary layout nesting to gain the best performance. If the StackLayout is the only layout within your AbsoluteLayout, you can also get rid of the AbsoluteLayout.

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <Label Text="Hallo"/>
        <ListView x:Name="listView" BackgroundColor="Green" VerticalOptions="FillAndExpand"
                          ItemsSource="{Binding .}" >
        </ListView>
        <Label Text="Hallosdf"/>
    </StackLayout>
</AbsoluteLayout>

Answer 3

use DLToolkit.Forms.Controls.FlowListView

xmal

SfListView Orientation="Horizontal" QueryItemSize="ListItems_QueryItemSize" ItemsSource="{Binding FavItemList}"

QueryItemSize is use to Set Custom Height of each item

in Code Behind

private void ListItems_QueryItemSize(object sender,Syncfusion.ListView.XForms.QueryItemSizeEventArgs e)
    {
        if (e.ItemData != null && !string.IsNullOrEmpty((e.ItemData as FavItemsList).Name))
        {
            e.ItemSize = (e.ItemData as FavItemsList).Name.Count() + 80;
            e.Handled = true;
        }
    }