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

Bartosz Z 0 Reputation points
2024-07-31T16:31:27.0133333+00:00

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.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,245 questions
0 comments No comments
{count} votes