Maui: [BUG] Popup cannot be display with right angles or rounded angles

Is there an existing issue for this?

I have searched the existing issues

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

I have read the “Reporting a bug” section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

When displaying a CommunityToolkit.Maui.Views.Popup, I would like to be able to define the angles radius.

At this moment, it is follow the native default value, that is right angles on Android and rounded angles on iOS for instance.

On Android :

On iOS :

Expected Behavior

I would like to have a parameter setting the corner radius.

Or the best would be to draw ourself the view, maybe with a handler and cgrect for iOS for instance ? Any advice or help would be appreciated on this point if it is possible.

I have had a look at the code, and maybe here we could do something for iOS to draw the frame using a CGRect ? https://github.com/CommunityToolkit/Maui/blob/3b44cc0350d57b196a967d2faa917d7cf23e27fa/src/CommunityToolkit.Maui.Core/Views/Popup/MauiPopup.macios.cs#L142C18-L142C18

OR if it is doing using a handler I would be happy to learn

Steps To Reproduce

Get the sample project https://github.com/espritm/Maui.Toolkit.Popup
Build and run, click the button, the popup is displayed
In Controls folder, Popup class, I would like to have a parameter or some native code pour modifiy the angles.

Link to public reproduction project repository

https://github.com/espritm/Maui.Toolkit.Popup

Environment

- .NET MAUI CommunityToolkit:6.0.0
- OS:iOS, Android
- .NET MAUI:7.0

Anything else?

No response

About this issue

Original URL
State: closed
Created 9 months ago
Reactions: 1
Comments: 18 (10 by maintainers)

Most upvoted comments

@cat0363 @espritm try this, may be iOS`s Default Shadow view for popup

base.ViewDidLayoutSubviews();
PresentationController?.ContainerView?.Subviews.OfType<UIImageView>().FirstOrDefault()?.RemoveFromSuperview();

I am using this to remove the Shadow since wantsDefaultContentAppearance was Deprecated, and can`t found other workarounds.

        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();

            if (VirtualView is CustomPopUp customPop && customPop.HideShadow)
                // Remove the Shadow image created by iOS;
                PresentationController?.ContainerView?.Subviews.OfType<UIImageView>().FirstOrDefault()?.RemoveFromSuperview();
        }

It also can fix ↑.

maonaoda on Oct 16, 2023

If you want to customize it with a handler, please also add the following.

View.Superview.Layer.MasksToBounds = false;

The above prevents the popup corner curvature from changing after screen rotation.

cat0363 on Oct 18, 2023

Due to the time difference, I created the PR in advance.

cat0363 on Oct 17, 2023

It seems that it is not enough to simply set it to 40.0f.

cat0363 on Oct 16, 2023

@maonaoda , I tested it with the layout below.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="MauiComm_VerityPopupSize.PopupPage6" Color="Transparent">
    <Border StrokeShape="RoundRectangle 10,10,10,10" BackgroundColor="Red" StrokeThickness="0">
        <StackLayout>
            <Label Text="Hello, World!" FontSize="32"/>
            <Button Text="Click me" HorizontalOptions="Center" />
        </StackLayout>
    </Border>
</toolkit:Popup>

Below is the verification result after changing the StokeShape and adjusting the roundness of the corners.

[Corners rounded]	[Corners right angles]

cat0363 on Oct 16, 2023