CommunityToolkit Popup for iOS has margins

3 weeks ago 30
ARTICLE AD BOX

In my NET10 MAUI application, I have a component to display the list of supported languages. I'm using the Popup function in the CommunityToolkit 13.0.0. The component is working fine for Android and Windows. This is a screenshot as example.

enter image description here

When I run the app in iOS, the result is very different: the popup has margin on the right and the left although I set explicitly no margin in the page

<toolkit:Popup x:Class="LanguageInUse.Components.LanguageCustomPicker.LanguagePicker" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit" Margin="{OnPlatform iOS='0', Default='5'}" Padding="0" x:TypeArguments="md:LanguageModel">

I binged online and I saw this is quite a common problem but the solution is related to old versions of the toolkit. For example, one implementation is like this

#if IOS public class CustomPopupHandler : CommunityToolkit.Maui.Core.Handlers.PopupHandler { protected override void ConnectHandler(UIKit.UIView platformView) { base.ConnectHandler(platformView); platformView.InsetsLayoutMarginsFromSafeArea = false; platformView.LayoutMargins = UIEdgeInsets.Zero; } } #endif

but the PopupHandler doesn't exist anymore. The result of the popup in iOS is as in the following screenshot. Quite different for the version for Android.

enter image description here

I saw on GitHub this issue that it is quite old. They suggest to use a different component for the popups called Mopups. I don't want to change the way I create the popup, I spend a lot of time to fix the issues coming from the new version of the toolkit.

Is there any specific implementation for iOS to remove the margin on the sides?

Read Entire Article