Xamarin form ListView size (height) to content?

Question

I'm developing a mobile application and I want to put one Grid in the SrollView, under it a ListView with the height of its elements, under the ListView another ListView with same height. I put two Listviews in StackLayout. It should look something like that This is content that should scroll in ScrollView

But with this implementation(code below), the first ListView Occupies the entire remaining height, and the second Listview is far from it there is listview height at the full remaining size

And my second Listview after scrolling is far away, here It also occupies the entire height of the scrollview

Here is the code:

 <ScrollView>
                <Grid RowSpacing="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="130"/>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid x:Name="RecommendedCaloriesGrid" Grid.Row="0"  RowSpacing="2" ColumnSpacing="1"
                          BackgroundColor="Violet" Margin="3">


                        // here is code of my Grid 1
                        </Grid>
                    </Grid>

                    <StackLayout Grid.Row="1"> // here I want to make a listview under Each other
                        <ListView x:Name="ItemsListView" BackgroundColor="red"
                                ItemsSource="{Binding Items}"
                                HasUnevenRows="true"
                                RefreshCommand="{Binding LoadItemsCommand}"
                                IsPullToRefreshEnabled="true"
                                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                                CachingStrategy="RecycleElement"
                                ItemSelected="OnItemSelected">
                            <d:ListView.ItemsSource>
                                <x:Array Type="{x:Type x:String}">
                                    <x:String>First Item</x:String>
                                    <x:String>Second Item</x:String>
                                </x:Array>
                            </d:ListView.ItemsSource>
                            <ListView.Header>
                                <StackLayout Margin="5" Spacing="2">
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="Завтрак" HorizontalOptions="StartAndExpand"
                                                   FontSize="Large" FontAttributes="Bold"/>
                                        <Label Text="744 ккал" HorizontalOptions="EndAndExpand"
                                                   FontSize="Large" FontAttributes="Bold"/>
                                    </StackLayout>
                                    <Label Text="Рекомендуется 30% от суточного потребления (n ккал)." FontSize="11"/>
                                </StackLayout>
                            </ListView.Header>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <StackLayout Padding="10">
                                            <Label Text="{Binding Text}" 
                            d:Text="{Binding .}"
                            LineBreakMode="NoWrap" 
                            Style="{DynamicResource ListItemTextStyle}" 
                            FontSize="16" />
                                            <Label Text="{Binding Description}" 
                            d:Text="Item descripton"
                            LineBreakMode="NoWrap"
                            Style="{DynamicResource ListItemDetailTextStyle}"
                            FontSize="13" />
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <ListView x:Name="LunchListView"           // second  ListView under first
                                ItemsSource="{Binding Items}"
                                HasUnevenRows="true"
                                RefreshCommand="{Binding LoadItemsCommand}"
                                IsPullToRefreshEnabled="true"
                                IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                                CachingStrategy="RecycleElement"
                                ItemSelected="OnItemSelected">
                            <d:ListView.ItemsSource>
                                <x:Array Type="{x:Type x:String}">
                                    <x:String>First Item</x:String>
                                    <x:String>Second Item</x:String>
                                    <x:String>Third Item</x:String>
                                    <x:String>Forth Item</x:String>
                                </x:Array>
                            </d:ListView.ItemsSource>
                            // SAME logic here

                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>

                </Grid>
            </ScrollView>

How I can fix it?

Please help me to find a solution. I read many articles like below, but did not find the answer. I want to do this without calculating the height in code-behind:

Xamarin.Forms ListView size to content?

Xamarin.Forms - ListView change height at runtime

https://forums.xamarin.com/discussion/comment/66248

Xamarin.Forms: ListView inside StackLayout: How to set height?

Answer 1

Why did you use two listviews to do this, you can just use different DataTemplate to achieve this function.

You can refer to the following code:

1.Consuming a DataTemplateSelector in XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr- 
namespace:Selector;assembly=Selector" x:Class="Selector.HomePage">
  <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="validPersonTemplate">
            <ViewCell>
               ...
            </ViewCell>
        </DataTemplate>
        <DataTemplate x:Key="invalidPersonTemplate">
            <ViewCell>
               ...
            </ViewCell>
        </DataTemplate>
        <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
            ValidTemplate="{StaticResource validPersonTemplate}"
            InvalidTemplate="{StaticResource invalidPersonTemplate}" />
    </ResourceDictionary>
</ContentPage.Resources>
 ...
</ContentPage>

2.use like this:

<ListView x:Name="listView"  ItemTemplate="{StaticResource personDataTemplateSelector}" 
 />

For more details, you can check:

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector

Besides, you can also try ListView Grouping, for more details:

https://learn.microsoft.com/en-ie/xamarin/xamarin-forms/user-interface/listview/

https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-grouping/

Answer 2

the first ListView Occupies the entire remaining height

For me it looks like its the issue with footer which is taking extra space inside listview. Can you just put the Empty listview footer and see if it works:

<ListView.Footer>
    <Label />
</ListView.Header>