How to provide auto scaling for CollectionView in Popup object from CommunityToolkit.Maui, after filling it by button clik event on Windows platform?

Question

I am trying to provide auto height adjustment for CollectionView object in toolkit:Popup. In the popup there are some header, entry and button which invoke command to fill the CollectionView bellow it, but it does not display any result, because height of Popup or CollectionView does not scale up. On Android platform everything works fine, but on Windows works only in hotreload mode after changing the HeightRequest or MinimumHeightRequest and after re-debug it does not work again.

There is the code of Popup element:

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               x:Class="SimpleRunManager.Views.Popups.SetStaticLocalizationPopup"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               xmlns:viewmodel="clr-namespace:SimpleRunManager.ViewModels"
               x:DataType="viewmodel:SetStaticLocalizationPopupViewModel"
               xmlns:model="clr-namespace:SimpleRunManager.Models"
               Color="{StaticResource MainPopup}"
               CanBeDismissedByTappingOutsideOfPopup="True"
               HorizontalOptions="{OnPlatform Default='Fill', WinUI='Center'}"
               VerticalOptions="Center">
    <!-- TODO -> style -->
    <VerticalStackLayout MinimumWidthRequest="{OnPlatform WinUI='500'}"
                         BackgroundColor="{StaticResource MainPopup}"
                         MaximumHeightRequest="{OnPlatform WinUI='601'}"
                         VerticalOptions="FillAndExpand">
        <Grid ColumnDefinitions="{OnPlatform Default='*,auto', WinUI='*,*'}">
            <Label Grid.ColumnSpan="{OnPlatform Default='1', WinUI='2'}"
                   Text="Set localization"
                   VerticalOptions="Center" 
                   HorizontalOptions="CenterAndExpand" 
                   Style="{StaticResource HeaderLabel}"
                   FontAttributes="Bold"
                   Padding="10,20,10,20"/>
            <Button Grid.Column="1"
                    Text="Delete"
                    Style="{StaticResource DangerButton}"
                    HorizontalOptions="End"
                    Margin="0,20,15,20"
                    Command="{Binding DeleteStaticLocalizationCommand}"
                    CommandParameter="{Binding Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type toolkit:Popup}}}"></Button>
        </Grid>
        
        <Grid ColumnDefinitions="*,*"
              ColumnSpacing="15"
              Padding="15,0,15,20">
            <Entry Placeholder="City name" 
                   Text="{Binding CityName}"
                   Grid.Column="0"
                   TextColor="Snow"></Entry>
            <Button Text="Search"
                    Command="{Binding SearchCommand}"
                    CommandParameter="{Binding Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type toolkit:Popup}}}"
                    Grid.Column="1"></Button>
        </Grid>
        <CollectionView IsVisible="{Binding IsSearched}"
                        ItemsSource="{Binding CityChoices}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:CityInfo">
                    <VerticalStackLayout HorizontalOptions="FillAndExpand"
                                             Padding="10,20,10,20"
                                             HeightRequest="100">
                            <VerticalStackLayout.GestureRecognizers>
                                <TapGestureRecognizer CommandParameter="{Binding .}" Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:SetStaticLocalizationPopupViewModel}}, Path=SetChosenCityCommand}"></TapGestureRecognizer>
                            </VerticalStackLayout.GestureRecognizers>
                            <Label Style="{StaticResource CityInfoLabel}">
                                <Label.Text>
                                    <MultiBinding StringFormat="{}{0} - {1}">
                                        <Binding Path="CityName"></Binding>
                                        <Binding Path="CountryName"></Binding>
                                    </MultiBinding>
                                </Label.Text>
                            </Label>
                            <Label Style="{StaticResource CityInfoLabel}">
                                <Label.Text>
                                    <MultiBinding StringFormat="{}({0} | {1})">
                                        <Binding Path="Lat"></Binding>
                                        <Binding Path="Lon"></Binding>
                                    </MultiBinding>
                                </Label.Text>
                            </Label>
                        </VerticalStackLayout>

                    
                </DataTemplate>
            </CollectionView.ItemTemplate>
            <CollectionView.EmptyView>
                <Label IsVisible="{Binding IsSearched}"
                       Text="Failed to find city with that name"
                       Style="{StaticResource CityInfoLabel}"
                       Padding="10,20,10,20"
                       TextColor="OrangeRed"></Label>
            </CollectionView.EmptyView>
        </CollectionView>
    </VerticalStackLayout>
</toolkit:Popup>

Here is link to a video where I showed my issue: Google Drive video

I have already tried change options like HorizontalOptions, VerticalOptions, Minimum/Maximum Width/Height and ive even tried to use Grid instead of VerticalStackLayout.

Answer 1

There is my solution and how i handled this issue: In the pleace where I put logic for downloading and filling ObservableColletion for Popup, where entire process ends I've added this code:

#if WINDOWS
            _thisPopup!.Content!.MinimumHeightRequest = 1;
#endif

(_thisPopup is the current Popup object)

After these changes everything works fine on Windows platform

Answer 2

On Android platform everything works fine, but on Windows works only in hotreload mode after changing the HeightRequest or MinimumHeightRequest and after re-debug it does not work again.

I reproduced it like your video show. I also tried to use Grid to wrap the whole content of popup but it ended in failure. You can report it on MAUI or CommunityToolkit on GitHub. Let our developers know and deal with it.