Search code examples
popupmauimaui-community-toolkit

.NET MAUI Community Toolkit Popup page is breaking


I am using the .NET Community toolkit for the Popup page. When we try to load the popup page the entire UI is breaking on iOS platform but it is working fine on Android platform. On the popup page I am using listView.

Screenshot:

iOS platform:

enter image description here

I am using below codes to open the pop up page:

this.ShowPopup(new FilterRequestPopupPage("ViewRequestsPage"));

PopUp Page Sample Code:

<?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" 
    xmlns:local="clr-namespace:MyProject.Converter" 
    Color="Transparent"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="ListPMCaller.Views.Requests.FilterRequestPopupPage">

    <Border
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand"
        x:Name="requeststatus_layout"
        Margin="15,0"
        Stroke="#e6e6e6"
        StrokeThickness="2"
        StrokeShape="RoundRectangle 20"
        Padding="0">

        <StackLayout
            Orientation="Vertical">

            <ListView
                VerticalOptions="Start"
                x:Name="requestfilter_listview"
                SeparatorColor="#cecece"
                ItemTapped="requestfilter_listview_ItemTapped"
                SelectionMode="None"
                CachingStrategy="RecycleElement"
                HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout 
                                Padding="5"
                                Margin="5"
                                Orientation="Vertical">
                                <Label 
                                    Text="{Binding statusTitle, Converter={StaticResource specialCharactorConverter}}"
                                    TextColor="{Binding TextColor}"
                                    Style="{StaticResource UserNameLabelStyle}"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label/>
                </ListView.Footer>
            </ListView>
        </StackLayout>
    </Border>
</toolkit:Popup>

Can you please provide me with a solution to resolve this issue? The issue is only on iOS platform.

Update

I have created a sample project and uploaded it here. Click on any option to view the next page and their top right select the icon to view the popup.

Current UI:

enter image description here

Expected UI:

enter image description here


Solution

  • Workaround

    You could update CommunityToolkit.Maui to version 6.1.0 (Since you are using .NET7). Though we recommend you update the MAUI App to use .NET8


    Cannot reproduce this issue using .NET7 and CommunityToolkit.Maui 6.1.0 on iPhone 15 pro max sumulator (iOS17.2).

    Here is the screenshot I get,

    enter image description here