Search code examples
.netxamlxamarinpopupmaui

how to remove gray background of the popup .net maui?

I am trying to build a popup to show it when there is an error , in the code below it show a popup with a big gray background as it show it image I tried to fix height and width but didn't work , but if I remove the border the popup display without the gray background (I don't know why) the same thing for frame .

<?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="MauiApp14.Popuppage"
              >
    
    <Border BackgroundColor="Green" MaximumWidthRequest="200" MaximumHeightRequest="200"  Stroke="#E9E7E6"  StrokeShape = "RoundRectangle 10,10,10,10" x:Name="target">
        <Label 
            HeightRequest="200"
            WidthRequest="200"
            Background="red"
            FontSize="30"
            TextColor="White" 
            HorizontalTextAlignment="Center"
            VerticalTextAlignment="Center"
            Text="Error 404 not found "
           
            />
    </Border>
   
</toolkit:Popup>

enter image description here

Solution

  • MaximumWidthRequest (and similar for Height) doesn't do what you think.
    Your version causes popup to use its default dimensions, because it does not know what Width/Height are wanted, because its child (Border) does not specify WidthRequest and HeightRequest.

    Fix:

    • Remove Maximum from those, so WidthRequest and HeightRequest:
      <Border ... WidthRequest="200" ...>

    NOTE: It worked without Border, because then popup's child (Label) does specify Width/Height.