Remove popup corner rounding and shadow on iOS by cat0363 · Pull Request #1463 · CommunityToolkit/Maui

cat0363 · 2023-10-17T05:53:34Z

In this PR, we will remove the rounded corners of the iOS version of Popup to make it look similar to Android and Windows.

Description of Change

In order to remove the rounded corners of the iOS version of Popup, I modified it as follows.

[src\CommunityToolkit.Maui.Core\Views\Popup\MauiPopup.macios.cs]

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

    _ = View ?? throw new InvalidOperationException($"{nameof(View)} cannot be null.");

    View.Superview.Layer.CornerRadius = 0.0f;
    PresentationController?.ContainerView?.Subviews.OfType<UIImageView>().FirstOrDefault()?.RemoveFromSuperview();

    SetElementSize(new Size(View.Bounds.Width, View.Bounds.Height));
}

The code below will remove the rounded corners.

View.Superview.Layer.CornerRadius = 0.0f;

However, if you use only the above code, the default shadow of iOS Popup will be displayed, and it will look like the following.

Shadows are visible around the corners.
To remove this shadow, we will use the method suggested by @maonaoda.

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

You can remove the shadow using the above code.

One thing to note is that in order to round the corners of the Popup, you need to layout it as shown 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" Size="300,300"Color="Transparent">
    <Border StrokeShape="RoundRectangle 40,40,40,40" BackgroundColor="Red" StrokeThickness="0">
        <Grid>
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
        </Grid>
    </Border>
</toolkit:Popup>

The following are points to keep in mind when rounding the corners of Popup.

Specify Transparent for Popup Color
Wrapping Popup content with Border
Set Border's StrokeShape to 0
Specify RoundRectangle and CorderRadius for StokeShape of Border

If the above layout is not applied, the rounded corners of the iOS version of Popup will be removed by default.

For reference, before the modification, Popup is displayed as below on iOS.

This is a breaking change as it applies to all users.

Linked Issues

Fixes [BUG] Popup cannot be display with right angles or rounded angles #1452

PR Checklist

Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
Has tests (if omitted, state reason in description)
Has samples (if omitted, state reason in description)
Rebased on top of main at time of PR
Changes adhere to coding standard
Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pull/XYZ

Additional information

I tested it with the following layout.

<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" Size="300,300"Color="Transparent">
    <Border StrokeShape="RoundRectangle 40,40,40,40" BackgroundColor="Red" StrokeThickness="0">
        <Grid>
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
            <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
        </Grid>
    </Border>
</toolkit:Popup>

Below are the verification results.

[Corners rounded]	[Corners right angles]

The following is the layout when the Popup content is not wrapped in a Border.

<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" Size="300,300" Color="Transparent">
    <Grid BackgroundColor="Red">
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
    </Grid>
</toolkit:Popup>

Below are the verification results.

You can see that if the Popup's content is not wrapped with a Border, the corners of the Popup will be at right angles, and if it is wrapped, the roundness of the corners of the Popup can be controlled by the StrokeShape of the Border.

It would be desirable to be able to control the roundness of Popup corners using Popup properties, but this would require significant modification for each platform. For this reason, we propose a method to avoid this by wrapping the Popup's content in a Border and controlling the roundness of the corners using the Border's StrokeShapre.

If possible, I would like you to consider the following discussion in this PR for free customization of Popup.
#1461

cat0363 · 2023-10-17T23:42:17Z

CornerRadius is initialized when the screen is rotated, so I will correct it and upload it again.

cat0363 · 2023-10-18T01:13:15Z

By adding the code below, the problem with rotation was also resolved.

View.Superview.Layer.MasksToBounds = false;

I will upload the source code again after verification.

…ue-1452

cat0363 · 2023-10-18T01:42:39Z

The verification videos before and after the correction are shown below.

[Case : Corners right angles]

[Before Fix]	[After Fix]
iPhone.14.iOS.16.4.2023-10-18.10-20-14.mp4	iPhone.14.iOS.16.4.2023-10-18.10-22-22.mp4

[Case : Corners rounded]

[Before Fix]	[After Fix]
iPhone.14.iOS.16.4.2023-10-18.10-37-00.mp4	iPhone.14.iOS.16.4.2023-10-18.10-40-12.mp4

After modification, you can see that the curvature of the Popup's corners has not changed.
If Border's CornerRadius is a large value, this change in curvature will not be seen, so we verified it with a small value of 13 or less.

Toine-db · 2024-01-03T16:31:31Z

Please check if this solution still works when showing multiple (or just 2) popups one after another.
In my case the wrong background was removed ;-)

bijington · 2024-01-03T18:14:33Z

Please check if this solution still works when showing multiple (or just 2) popups one after another. In my case the wrong background was removed ;-)

This PR has been completed, if you are seeing an issue can you please open a bug at: https://github.com/CommunityToolkit/Maui/issues/new/choose

Toine-db · 2024-01-03T18:23:06Z

Please check if this solution still works when showing multiple (or just 2) popups one after another. In my case the wrong background was removed ;-)

This PR has been completed, if you are seeing an issue can you please open a bug at: https://github.com/CommunityToolkit/Maui/issues/new/choose

Thanks for the comment, I now see I put this in the wrong thread.
I should be in #1615

cat0363 and others added 3 commits October 17, 2023 13:57

Remove popup corner rounding and shadow

00efb89

Merge branch 'main' into Issue-1452

93b2e06

Merge branch 'main' into Issue-1452

8b93cc8

cat0363 added 2 commits October 18, 2023 10:26

Add support for screen rotation

a295878

Merge branch 'Issue-1452' of https://github.com/cat0363/Maui into Iss…

0c3f58b

…ue-1452

TheCodeTraveler added 2 commits October 22, 2023 15:39

Merge branch 'main' into Issue-1452

b2fad07

Merge branch 'main' into Issue-1452

272896a

TheCodeTraveler approved these changes Oct 22, 2023

View reviewed changes

TheCodeTraveler enabled auto-merge (squash) October 22, 2023 13:55

TheCodeTraveler merged commit 307dcfb into CommunityToolkit:main Oct 22, 2023

This was referenced Dec 21, 2023

[BUG] Popup Background Is Not Transparent on iOS for .Net8 #1560

Closed

Remove popup shadow on iOS 17 #1615

Merged

github-actions Bot locked and limited conversation to collaborators Nov 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove popup corner rounding and shadow on iOS#1463

Remove popup corner rounding and shadow on iOS#1463
TheCodeTraveler merged 7 commits intoCommunityToolkit:mainfrom
cat0363:Issue-1452

cat0363 commented Oct 17, 2023 •

edited

Loading

Uh oh!

cat0363 commented Oct 17, 2023

Uh oh!

cat0363 commented Oct 18, 2023

Uh oh!

cat0363 commented Oct 18, 2023

Uh oh!

Toine-db commented Jan 3, 2024

Uh oh!

bijington commented Jan 3, 2024

Uh oh!

Toine-db commented Jan 3, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

cat0363 commented Oct 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description of Change

Linked Issues

PR Checklist

Additional information

Uh oh!

cat0363 commented Oct 17, 2023

Uh oh!

cat0363 commented Oct 18, 2023

Uh oh!

cat0363 commented Oct 18, 2023

Uh oh!

Toine-db commented Jan 3, 2024

Uh oh!

bijington commented Jan 3, 2024

Uh oh!

Toine-db commented Jan 3, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cat0363 commented Oct 17, 2023 •

edited

Loading