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

Hello,

Thanks for your feedback.

I have reproduced the same situation with your code on Windows.

For issues where the same control behaves differently on different platforms, it is recommended that you report it to Github to make our development team aware of it.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.