Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Popup not sizing to contents when onPresenting is used. #1887

Open
2 tasks done
urielginsburg opened this issue May 16, 2024 · 5 comments
Open
2 tasks done

[BUG] Popup not sizing to contents when onPresenting is used. #1887

urielginsburg opened this issue May 16, 2024 · 5 comments
Labels
area/views Issue/Discussion/PR that has to do with Views bug Something isn't working unverified

Comments

@urielginsburg
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

Current Behavior

Issue

When displaying a popup using IPopupService.ShowPopup (or ...Async, doesn't matter), the popup is displayed empty (you can't see anything, but the main page becomes disabled and becomes enabled again after you click on it anywhere.
For example (based on the default MAUI program template in VS 2022):

MyPopup.xaml

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:local="clr-namespace:MauiApp2"
               Color="Transparent"
               x:Class="MauiApp2.MyPopup">
    <VerticalStackLayout>
        <CollectionView ItemsSource="{Binding Messages}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</toolkit:Popup>

MyPopup.xaml.cs

public partial class MyPopup : Popup
{
	public MyPopup(MyPopupViewmodel viewmodel)
	{
		BindingContext = viewmodel;
		InitializeComponent();
	}
}

MyPopupViewmodel.cs

public class MyPopupViewmodel : INotifyPropertyChanged
{
    private ObservableCollection<string>? _messages;

    public event PropertyChangedEventHandler? PropertyChanged;

    public ObservableCollection<string>? Messages
    {
        get => _messages;
        set
        {
            _messages = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Messages)));
        }
    }
}

MainPage.xaml.cs

    private void OnButtonClicked(object sender, EventArgs e)
    {
        _popupService.ShowPopup<MyPopupViewmodel>(viewmodel => viewmodel.Messages = new System.Collections.ObjectModel.ObservableCollection<string>(new[] { "Hello, World!" }));
    }

The result is this:
image

Additional information

  1. Setting the messages in the popup's constructor and using ShowPopup without using onPresenting resolves the issue e.g.,
	public MyPopup(MyPopupViewmodel viewmodel)
	{
		BindingContext = viewmodel;
		viewmodel.Messages = new System.Collections.ObjectModel.ObservableCollection<string>
		{
			"Hello world",
		};
		InitializeComponent();
	}
  1. Alternativoodooly, playing around with MinimumWidthRequest and MinimumHeightRequest properties on the StackLayout in the popup to any value larger than 1 also resolves the issue and ShowPopup can be used with setting the content in onPresenting.

### Expected Behavior

The popup should display correctly when using `ShowPopup` with `onPresenting`.

### Steps To Reproduce

1. Create a new MAUI program using the default template in VS 2022.
2. Add the MAUI CommunityToolkit and a popup as described in this post.

### Link to public reproduction project repository

https://github.com/urielginsburg/maui-communitytoolkit-popup-issue

### Environment

```markdown
- .NET MAUI CommunityToolkit: 9.0.0
- OS: Windows 11
- .NET MAUI: 8.0.41

Anything else?

No response

@urielginsburg urielginsburg added bug Something isn't working unverified labels May 16, 2024
@bijington
Copy link
Contributor

What happens if you don't assign the Messages property but just add to it? So something like:

MyPopupViewmodel.cs

public class MyPopupViewmodel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    public ObservableCollection<string> Messages { get; } = new ();
}

MainPage.xaml.cs

private void OnButtonClicked(object sender, EventArgs e)
{
    _popupService.ShowPopup<MyPopupViewmodel>(viewmodel => viewmodel.Messages.Add("Hello, World!"));
}

How does this behave?

@urielginsburg
Copy link
Author

@bijington
Yeah, I tried that too, same result :(

@bijington
Copy link
Contributor

I suspect that the isn't necessarily the use of the onPresenting parameter but more the timing of when this occurs during the rendering of the popup. This is likely to be a popup sizing issue. Just to confirm are you only seeing this issue on Windows?

@vhugogarcia vhugogarcia added the area/views Issue/Discussion/PR that has to do with Views label May 17, 2024
@urielgin
Copy link

@bijington yep only on windows. It is almost definitely a timing issue - I admittedly didn't dive into the toolkit code, but playing around with it, specifically with MinimumWidthRequest and MinimumHeightRequest of the inner elements in the popup, it would size correctly some of the runs and not resize at all the rest of the time. Btw, this also affects the positioning of the popup, as I assume the position is calculated as a function of the size.
I ended up for the time being using a grid as the outermost element and giving it a minimum width request of the full width of the containing window. This voodoo trick seemed to make it size and position correctly. Funnily enough, the popup did not have the full width of the window but sized correctly to contents.

@cat0363
Copy link
Contributor

cat0363 commented May 27, 2024

When I changed CollectionView to BindableLayout or ListView, it was displayed at the intended size.

    <StackLayout Orientation="Vertical" BindableLayout.ItemsSource="{Binding Messages}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding}"/>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>

    <ListView ItemsSource="{Binding Messages}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label Text="{Binding}"/>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

It seems that the correct size is not obtained only when using CollectionView.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/views Issue/Discussion/PR that has to do with Views bug Something isn't working unverified
Projects
None yet
Development

No branches or pull requests

5 participants