Net MAUI Windows平台运行时Shadow不加载问题求助

已知Bug说明 #

这是.NET MAUI针对Windows平台的已知渲染问题：当Shadow定义在CollectionView的DataTemplate内的Border控件上时，首次编译运行不会渲染阴影，只有通过Hot Reload触发界面更新后，阴影才会正常显示。该问题属于控件初始化阶段的渲染逻辑遗漏，在MAUI多个版本中均有反馈。

解决方案 #

方法1：通过Loaded事件强制刷新Shadow #

修改XAML中的Border控件，添加Loaded事件：

<Border BackgroundColor="White"
        StrokeShape="RoundRectangle 5,5,5,5"
        Stroke="white"
        Padding="15"
        Margin="15"
        Loaded="Border_Loaded">
    <Border.Shadow>
        <Shadow Brush="Black"
                Offset="10,10"
                Opacity="0.2" />        
    </Border.Shadow>
    <!-- 内部Grid及子控件保持不变 -->
</Border>

在页面后台代码中实现事件处理逻辑，通过重置Shadow触发渲染：

private void Border_Loaded(object sender, EventArgs e)
{
    if (sender is Border border && border.Shadow != null)
    {
        var tempShadow = border.Shadow;
        border.Shadow = null;
        border.Shadow = tempShadow;
    }
}

方法2：自定义Border控件封装修复逻辑 #

创建自定义ShadowBorder控件，在模板应用阶段强制刷新Shadow：

using Microsoft.Maui.Controls;

namespace YourNamespace;

public class ShadowBorder : Border
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        
        if (Shadow != null)
        {
            var tempShadow = Shadow;
            Shadow = null;
            Shadow = tempShadow;
        }
    }
}

在XAML中引用该自定义控件替代原生Border：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.YourPage">
    <Grid BackgroundColor="#F1F1F1">
        <CollectionView ItemsSource="{Binding list}" ItemsLayout="VerticalGrid, 3">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <local:ShadowBorder BackgroundColor="White"
                                       StrokeShape="RoundRectangle 5,5,5,5"
                                       Stroke="white"
                                       Padding="15"
                                       Margin="15">
                        <local:ShadowBorder.Shadow>
                            <Shadow Brush="Black"
                                    Offset="10,10"
                                    Opacity="0.2" />        
                        </local:ShadowBorder.Shadow>
                        <!-- 内部Grid及子控件保持不变 -->
                    </local:ShadowBorder>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

方法3：升级.NET MAUI版本 #

微软在后续的MAUI更新中已修复部分类似渲染Bug，建议升级到.NET 7或.NET 8的最新稳定补丁版本，部分场景下无需额外代码即可解决该问题。

效果对比 #

• 首次编译运行：控件无阴影显示，界面扁平化
• Hot Reload触发后：控件右下角出现预期的黑色阴影

内容的提问来源于stack exchange，提问作者Francisco José Goñi