.NET MAUI中未指定背景色时设置Border透明度的方法

核心问题说明 #

你遇到的现象本质是：未显式设置BackgroundColor时，Border的默认背景色为完全透明（Transparent），此时设置Opacity不会对下方元素产生视觉遮挡——只有当背景有实际颜色值时，Opacity才能让颜色半透，从而呈现覆盖效果。

解决方案：绑定系统主题默认背景色资源 #

不需要硬编码颜色，也不用强制设置自定义主题，直接通过DynamicResource引用.NET MAUI内置的主题颜色资源即可，这些资源会自动跟随系统明暗主题切换。

方法1：绑定页面默认背景色

修改Border的XAML代码，添加对PageBackgroundColor资源的绑定：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">
    <Grid>
        <VerticalStackLayout
            Grid.Row="0" Grid.Column="0">
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
            <Label Text="Hello world!"/>
        </VerticalStackLayout>
        <Border
            Opacity="0.75"
            Grid.Row="0" Grid.Column="0" ZIndex="99"
            HorizontalOptions="Start" VerticalOptions="Start"
            WidthRequest="200"  HeightRequest="100"
            Stroke="white" StrokeThickness="3"
            BackgroundColor="{DynamicResource PageBackgroundColor}"/>
    </Grid>
</ContentPage>

方法2：绑定控件默认背景色

如果希望Border使用控件级别的默认背景色（和按钮、输入框等控件背景一致），可以替换为ControlBackgroundColor资源：

BackgroundColor="{DynamicResource ControlBackgroundColor}"

关键说明 #

• DynamicResource会自动监听系统主题变化，切换明暗主题时，资源对应的颜色值会自动更新，无需额外代码处理。
• 不需要为应用设置自定义主题，依赖.NET MAUI默认的主题系统即可满足需求。
• 测试时，Windows和Mac平台下.NET 6 MAUI默认支持主题变化的实时UI更新，无需手动刷新页面。

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