如何移除.NET MAUI中Popup弹窗的灰色背景？

你在使用MAUI Toolkit构建错误提示Popup时，遇到了添加Border/Frame组件后弹窗出现大面积灰色背景的问题，设置宽高参数无效，但移除这些组件后灰色背景消失。这是因为MAUI Toolkit Popup的默认布局行为会让根级子元素自动填充整个弹窗容器，而Border默认的HorizontalOptions和VerticalOptions是Fill，所以会拉伸占满全屏，超出你设置的MaximumWidthRequest/MaximumHeightRequest范围的区域，就会显示Popup的默认灰色背景。

解决方案 #

以下几种方法可以解决这个问题：

方法1：设置Popup的ContentLayout属性

直接通过ContentLayout指定弹窗的固定大小和居中对齐，让Popup的内容区域限制在你需要的尺寸内：

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

方法2：给Border套一层居中布局

用VerticalStackLayout或HorizontalStackLayout包裹Border，设置布局的宽高和居中属性，让Border只占布局的大小：

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

方法3：直接修改Border的布局属性

给Border设置HorizontalOptions="Center"和VerticalOptions="Center"，同时用WidthRequest/HeightRequest代替MaximumWidthRequest/MaximumHeightRequest，强制Border保持指定大小并居中：

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

补充说明 #

移除Border后灰色背景消失，是因为Label默认的布局行为是自适应内容大小，且不会强制填充整个Popup容器，所以Popup只会包裹Label的区域，不会显示多余的灰色背景。

内容的提问来源于stack exchange，提问作者the_yaz2000