POPUP OBSCURES THE PAGE

Giorgio Sfiligoi 266

I created a popup in NET MAUI 8.

As its normal behavior, the popup obscures the visible portion of the hosting page.

Is it possible to avoid this?

Or, even better, I would like that only one item in the page, such as an Entry field, remains showing normally - as you can guess, the popup is supposed to enter text in that field.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 33,176 Reputation points Microsoft Vendor

2024-11-25T07:31:20.8033333+00:00

On which platform? How did you add the popup? Please include some code snippets so that I can test and reproduce the issue. Thanks for your collaboration.

Giorgio Sfiligoi 266

The platform is Android.

I created a simple test, adding the following at the bottom of the standard NET MAUI welcome page:

            <Entry Placeholder="Input from popup should go here"
                   HorizontalOptions="Start" 
                   TextColor="Blue" BackgroundColor="WhiteSmoke" />
            <Button Text="Show popup" Clicked="OnShowPopup" />

The backcode is:

        private async void OnShowPopup(object sender, EventArgs e)
        {
            var popup = new MyPopup();
            var result = await this.ShowPopupAsync(popup, CancellationToken.None);
        }

MyPopup is copied from the example in the documentation:

<?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="TestPopup.Popups.MyPopup"
               CanBeDismissedByTappingOutsideOfPopup="False"
               VerticalOptions="End">
    <VerticalStackLayout>
        <Label Text="This is a very important message!"
               VerticalOptions="Center" 
               HorizontalOptions="Center"
               Margin="40"/>
        <Button Text="OK" Clicked="OnOK_Clicked" Margin="10"/>
    </VerticalStackLayout>
</toolkit:Popup>

with backcode:

using CommunityToolkit.Maui.Alerts;
using CommunityToolkit.Maui.Views;
namespace TestPopup.Popups;
public partial class MyPopup : Popup
{
	public MyPopup()
	{
		InitializeComponent();
	}
	private async void OnOK_Clicked(object sender, EventArgs e)
	{
		var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
		await CloseAsync(_popupId, token: cts.Token);
		await Toast.Make("Popup dismissed by button").Show();
	}
}

All this is strightforward. I would like that at least the Entry field added in the host page is not obscured.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 33,176 Reputation points Microsoft Vendor

2024-11-26T08:38:46.55+00:00

Could you describe how the popup obscures the visible portion of the hosting page? I tested with the code snippets, but it's not clear about your excepted behavior. Can you indicate which part of the image you would like not to be obscured?
Giorgio Sfiligoi 266 Reputation points

2024-11-26T09:52:43.1633333+00:00

Well, you can see in your sample that the hosting page is completely obscured.

Normally the background is white, it becomes grey when the popup is displaying. Similar changes happen for all the elements in the page.

I would like as a minimum that the Entry field where you typed 'gggg' remains with its normal colors.

1 answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 33,176 Reputation points Microsoft Vendor

2024-11-27T05:25:35.1466667+00:00

Hello,

Community tool kit is a third-party tool and does not have this feature. Please add feature request in the CommunityToolkit GitHub page for further help, thanks for your understanding.

Best Regards,

Wenyan Zhang

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.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

POPUP OBSCURES THE PAGE

1 answer

Your answer