Content of stacklayout sometime overlap

CC 1 Reputation point
2021-09-02T06:29:46.393+00:00

I implemented a menu through stack-layout in Xamarin.

But sometimes my menu would overlap. Sometimes not.

It only happened on Android.

Here is the code.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
    x:Class="XXX">
    <ContentPage.Content>
        <ScrollView Orientation="Vertical">
            <StackLayout Orientation="Vertical" Padding="0" Spacing="0">

                <StackLayout Orientation="Vertical" Padding="0" Spacing="0">
                    <StackLayout x:Name="Block_1" Orientation="Vertical" Padding="10,0,0,0" Spacing="0">
                        <StackLayout Orientation="Horizontal" Padding="0,5,0,5" Spacing="10">
                            //Some content label/image...
                        </StackLayout>

                        <StackLayout x:Name="Item_1" Padding="0,0,0,10" Spacing="5">
                            //Some content label/image...
                        </StackLayout>

                        <StackLayout x:Name="Item_2" Padding="0,0,0,10" Spacing="5">
                            //Some content label/image...
                        </StackLayout>
                    </StackLayout>

                    <BoxView Color="#1E5084" WidthRequest="1000" HeightRequest="1"/>

                    <StackLayout x:Name="Block_2" Orientation="Vertical" Padding="10,0,0,0" Spacing="0">
                        <StackLayout Orientation="Horizontal" Padding="0,5,0,5" Spacing="10">
                            //Some content label/image...
                        </StackLayout>

                        <StackLayout x:Name="Item_3" Padding="0,0,0,10" Spacing="5">
                            //Some content label/image...
                        </StackLayout>

                        <StackLayout x:Name="Item_4" Padding="0,0,0,10" Spacing="5">
                            //Some content label/image...
                        </StackLayout>
                    </StackLayout>

                </StackLayout>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

When the Item_1 and Item_2 in Block_1 is set to visible=false,

The content of Block_2 should be on top of the screen.

But when I set Item_1 and Item_2 to visibie=true

The Blcok_2 should just being pushed to lower part.

But sometimes the content of Item_1 and Item_2 just overlapped on Block_2.

Sometimes it works as expected(Being pushed lower)

What would be the problem?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,316 questions
{count} votes