Background is not freezing when there is a another layer is top on it.

Question

POC.gif
Hello Team,

Here, I'm using the two stack layouts wrapped in a absolute layout. When the top layer is present the background I can able to click on the entry and the entry is focusing. I had observed this behavior in android itself. this is not present in iOS.

Expected behavior: when the top layer is visible, the background layer should be freeze/ should not be interactive

I had tried this scenario using the absolute layout and grid layout facing same with both the layouts.

.Net Version : Tried with 7.0 and 8.0.

Please find the attachments for reference. and let me know if anything is required from my end.

 <AbsoluteLayout>
     <StackLayout
         AbsoluteLayout.LayoutBounds="0,0,1,1"
         AbsoluteLayout.LayoutFlags="All"
         BackgroundColor="White"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand">
         <Entry BackgroundColor="Red" Text="Dummy" />
     </StackLayout>
     <StackLayout
         AbsoluteLayout.LayoutBounds="0,0,1,1"
         AbsoluteLayout.LayoutFlags="All"
         BackgroundColor="#80000000"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand">
         <Label
             HorizontalOptions="CenterAndExpand"
             Text="sample text"
             VerticalOptions="CenterAndExpand" />
     </StackLayout>
 </AbsoluteLayout>

Answer 1

Hello,

===========Update==========

Could you please let me know that is this the actual behaviour in android or it this any issue.

This is a actual behavior in Android. Stacklayout is a native android View in Android platforms and Entry is Edittext in android.

So, I create a native android project in Android studio with following layout. The View will cover this EditText. When I run this application, I find the Edittext could be clicked and the content of EditText can be selected and copied.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/app_text"
    />


    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"/>
</RelativeLayout>

I can reproduce this issue. If you want to background layout can be freeze.

You can do this by Popup - .NET MAUI Community Toolkit.

Please install this CommunityToolkit.Maui NuGet packages into your existing or new .NET MAUI projects and set it up.

Then create a ContentPage like following code. Please do not forget to change the ContentPage to the Popup in the page's background code. I set the popup's background to transparent and set popup cannot be closed by click the outside of popup.

And I move top layout code in the popup.

<?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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="Mauidrawermenu.CoveredPage"
             HorizontalOptions="Fill"
             VerticalOptions="Fill"
             Color="Transparent"
             CanBeDismissedByTappingOutsideOfPopup="False"    
             >
    <StackLayout
  BackgroundColor="#80000000"
  HorizontalOptions="FillAndExpand"
  VerticalOptions="FillAndExpand">
        <Label
      HorizontalOptions="CenterAndExpand"
      Text="sample text"
      VerticalOptions="CenterAndExpand" />
    </StackLayout>
</toolkit:Popup>

Then popup this layout in the AbsoluteLayout's background code.

public CatsPage()
{
    InitializeComponent();
    var popup = new CoveredPage();
   this.ShowPopup(popup);
}

Here is my edited AbsoluteLayout's xml code.

 <AbsoluteLayout>
        <StackLayout
         AbsoluteLayout.LayoutBounds="0,0,1,1"
         AbsoluteLayout.LayoutFlags="All"
         BackgroundColor="White"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand">
            <Entry BackgroundColor="Red" Text="Dummy" />
        </StackLayout>
       
    </AbsoluteLayout>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.