.NET MAUI: The entire UI-Breaking

Aleena George 25 Reputation points
2024-05-21T07:29:41.2333333+00:00

The entire UI is breaking on the content page, and when I try to go back to the previous page, it also doesn't work. These issues are only on the iOS platform; it is working fine on the Android platform. Below, I am adding a screenshot of the issue.

Screenshot:

Simulator Screenshot - iPhone 14 Pro - 2024-05-21 at 01.59.19

Below I am adding the codes:

XAML:

<Frame 
    Style="{StaticResource HomeTabFrameStyle}">

    <Grid
        VerticalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="6*" />
            <RowDefinition Height="94*" />
        </Grid.RowDefinitions>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="{OnIdiom Phone=60, Tablet=90, Desktop=60}" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="8*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>

            <StackLayout Style="{StaticResource HeaderFirstStackStyle}">

                <Image 
                    Style="{StaticResource HeaderImageStyle}" 
                    Source="ic_back_arrow_xx.png"/>

                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer
                        Tapped="BackToPreviousPage"
                        NumberOfTapsRequired="1">
                    </TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>

            <StackLayout Style="{StaticResource HeaderSecondStackStyle}">
                <Image 
                    Source="ic_accounts_xx.png"
                    Style="{StaticResource HeaderImageStyle}" />

                <Label 
                    x:Name="header_name"
                    Style="{StaticResource HeaderLabelStyle}" />
            </StackLayout>

            <StackLayout Style="{StaticResource HeaderThirdStackStyle}"/>
        </Grid>

        <Frame
            Grid.Row="1"
            Style="{StaticResource InnerFrameStyle}"
            x:Name="account_layout">
            <StackLayout
                Margin="10">

                <ListView   
                    x:Name="myaccountlistview"
                    HasUnevenRows="True"
                    SeparatorColor="#cecece"
                    SelectionMode="None"
                    ItemTapped="MyAccountTapped"
                    CachingStrategy="RecycleElement"
                    SeparatorVisibility="None">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <Border
                                        Stroke="#bdbdbd"
                                        StrokeThickness="1"
                                        Padding="8"
                                        Margin="5"
                                        BackgroundColor="{Binding BGColor}">
                                        <Border.StrokeShape>
                                            <RoundRectangle CornerRadius="40" />
                                        </Border.StrokeShape>

                                        <StackLayout 
                                            VerticalOptions="FillAndExpand"
                                            Margin="5,0,5,0"
                                            Orientation="Horizontal">

                                            <Label 
                                                Text="{Binding Title}"
                                                HorizontalOptions="StartAndExpand"
                                                VerticalOptions="CenterAndExpand"
                                                TextColor="{Binding TextColor}">
                                                <Label.FontSize>
                                                    <OnIdiom x:TypeArguments="x:Double">
                                                        <OnIdiom.Phone>18</OnIdiom.Phone>
                                                        <OnIdiom.Tablet>27</OnIdiom.Tablet>
                                                        <OnIdiom.Desktop>18</OnIdiom.Desktop>
                                                    </OnIdiom>
                                                </Label.FontSize>
                                            </Label>

                                            <Image 
                                                Source="{Binding ImageSource}"
                                                VerticalOptions="CenterAndExpand"
                                                HorizontalOptions="Start">
                                                <Image.WidthRequest>
                                                    <OnIdiom x:TypeArguments="x:Double">
                                                        <OnIdiom.Phone>18</OnIdiom.Phone>
                                                        <OnIdiom.Tablet>27</OnIdiom.Tablet>
                                                        <OnIdiom.Desktop>18</OnIdiom.Desktop>
                                                    </OnIdiom>
                                                </Image.WidthRequest>
                                                <Image.HeightRequest>
                                                    <OnIdiom x:TypeArguments="x:Double">
                                                        <OnIdiom.Phone>18</OnIdiom.Phone>
                                                        <OnIdiom.Tablet>27</OnIdiom.Tablet>
                                                        <OnIdiom.Desktop>18</OnIdiom.Desktop>
                                                    </OnIdiom>
                                                </Image.HeightRequest>
                                            </Image>
                                        </StackLayout>
                                        <Border.HeightRequest>
                                            <OnIdiom x:TypeArguments="x:Double">
                                                <OnIdiom.Phone>50</OnIdiom.Phone>
                                                <OnIdiom.Tablet>75</OnIdiom.Tablet>
                                                <OnIdiom.Desktop>50</OnIdiom.Desktop>
                                            </OnIdiom>
                                        </Border.HeightRequest>
                                    </Border>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>

                    <ListView.Footer>
                        <Label/>
                    </ListView.Footer>
                </ListView>
            </StackLayout>

        </Frame>
    </Grid>
</Frame>


Using the code below to go back to the previous page

private void BackToPreviousPage(object sender, EventArgs e)

{

	try

	{

		Utility.isShowProgress = false;

		OnBackButtonPressed();

	}

	catch (Exception ex)

	{

		Debug.WriteLine("Exception:>>" + ex);

	}

}

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

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,017 questions
{count} votes