如何在.NET MAUI中通过类似Handlers的方式实现自定义阴影逻辑？

MAUI 中并没有单独的 ShadowHandler 或 IShadowHandler，因为 Shadow 是作为控件的附属属性存在的，而非独立可处理的 UI 元素。要通过类似 Handler 重写控件逻辑的方式实现自定义阴影，可通过以下两种方案：

方案一：扩展现有控件的 Handler #

针对已有带 Shadow 属性的控件（如 Button、Frame、ContentView），直接扩展其对应的 Handler，在平台配置阶段重写阴影的渲染逻辑。

示例：自定义 Button 的阴影实现 #

1. 创建自定义 Handler 继承自原生控件 Handler

public class CustomShadowButtonHandler : ButtonHandler
{
    protected override void PlatformConfigure()
    {
        base.PlatformConfigure();
        
        // 根据不同平台实现自定义阴影
#if ANDROID
        var nativeButton = PlatformView;
        // Android 上自定义阴影：设置 elevation、阴影颜色
        nativeButton.Elevation = 10;
        nativeButton.SetShadowColor(Android.Graphics.Color.Parse("#88000000"));
#elif IOS
        var nativeButton = PlatformView;
        // iOS 上自定义阴影：通过 Layer 设置
        nativeButton.Layer.ShadowColor = UIKit.UIColor.Black.CGColor;
        nativeButton.Layer.ShadowOpacity = 0.5f;
        nativeButton.Layer.ShadowRadius = 8;
        nativeButton.Layer.ShadowOffset = new CoreGraphics.CGSize(2, 2);
        nativeButton.Layer.MasksToBounds = false;
#elif WINDOWS
        var nativeButton = PlatformView;
        // Windows 上自定义阴影：通过 DropShadow
        var shadow = new Microsoft.UI.Xaml.Media.DropShadow();
        shadow.Color = Windows.UI.Colors.Black;
        shadow.Opacity = 0.5;
        shadow.BlurRadius = 8;
        shadow.Offset = new Windows.UI.Xaml.Media.Vector3(2, 2, 0);
        Microsoft.UI.Xaml.Media.ShadowDrop.SetShadow(nativeButton, shadow);
#endif
    }
}

2. 在 MauiProgram 中注册自定义 Handler

builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler<Button, CustomShadowButtonHandler>();
});

方案二：创建带自定义阴影属性的自定义控件 + 专属 Handler #

如果需要统一多个控件的自定义阴影逻辑，可封装自定义控件并为其编写专属 Handler。

步骤1：定义自定义控件 #

public class CustomShadowView : ContentView
{
    public static readonly BindableProperty ShadowColorProperty =
        BindableProperty.Create(nameof(ShadowColor), typeof(Color), typeof(CustomShadowView), Colors.Black);
    
    public static readonly BindableProperty ShadowRadiusProperty =
        BindableProperty.Create(nameof(ShadowRadius), typeof(double), typeof(CustomShadowView), 5.0);
    
    public static readonly BindableProperty ShadowOffsetXProperty =
        BindableProperty.Create(nameof(ShadowOffsetX), typeof(double), typeof(CustomShadowView), 0.0);
    
    public static readonly BindableProperty ShadowOffsetYProperty =
        BindableProperty.Create(nameof(ShadowOffsetY), typeof(double), typeof(CustomShadowView), 0.0);

    public Color ShadowColor
    {
        get => (Color)GetValue(ShadowColorProperty);
        set => SetValue(ShadowColorProperty, value);
    }

    public double ShadowRadius
    {
        get => (double)GetValue(ShadowRadiusProperty);
        set => SetValue(ShadowRadiusProperty, value);
    }

    public double ShadowOffsetX
    {
        get => (double)GetValue(ShadowOffsetXProperty);
        set => SetValue(ShadowOffsetXProperty, value);
    }

    public double ShadowOffsetY
    {
        get => (double)GetValue(ShadowOffsetYProperty);
        set => SetValue(ShadowOffsetYProperty, value);
    }
}

步骤2：编写自定义 Handler #

public class CustomShadowViewHandler : ViewHandler<CustomShadowView, object>
{
    protected override object CreatePlatformView()
    {
        // 根据平台创建原生容器
#if ANDROID
        return new Android.Widget.FrameLayout(Context);
#elif IOS
        return new UIKit.UIView();
#elif WINDOWS
        return new Microsoft.UI.Xaml.Controls.Grid();
#endif
    }

    protected override void ConnectHandler(object platformView)
    {
        base.ConnectHandler(platformView);
        UpdateShadow();
    }

    protected override void OnElementPropertyChanged(System.ComponentModel.PropertyChangedEventArgs args)
    {
        base.OnElementPropertyChanged(args);
        if (args.PropertyName is nameof(CustomShadowView.ShadowColor) or 
            nameof(CustomShadowView.ShadowRadius) or 
            nameof(CustomShadowView.ShadowOffsetX) or 
            nameof(CustomShadowView.ShadowOffsetY))
        {
            UpdateShadow();
        }
    }

    private void UpdateShadow()
    {
        if (Element == null || PlatformView == null) return;

#if ANDROID
        var nativeView = PlatformView as Android.Widget.FrameLayout;
        nativeView.Elevation = (float)Element.ShadowRadius;
        nativeView.SetShadowColor(Element.ShadowColor.ToAndroid());
        nativeView.TranslationX = (float)Element.ShadowOffsetX;
        nativeView.TranslationY = (float)Element.ShadowOffsetY;
#elif IOS
        var nativeView = PlatformView as UIKit.UIView;
        nativeView.Layer.ShadowColor = Element.ShadowColor.ToCGColor();
        nativeView.Layer.ShadowOpacity = 0.6f;
        nativeView.Layer.ShadowRadius = (nfloat)Element.ShadowRadius;
        nativeView.Layer.ShadowOffset = new CoreGraphics.CGSize((nfloat)Element.ShadowOffsetX, (nfloat)Element.ShadowOffsetY);
        nativeView.Layer.MasksToBounds = false;
#elif WINDOWS
        var nativeView = PlatformView as Microsoft.UI.Xaml.Controls.Grid;
        var shadow = new Microsoft.UI.Xaml.Media.DropShadow();
        shadow.Color = Element.ShadowColor.ToWindowsColor();
        shadow.Opacity = 0.6;
        shadow.BlurRadius = (float)Element.ShadowRadius;
        shadow.Offset = new Microsoft.UI.Xaml.Media.Vector3((float)Element.ShadowOffsetX, (float)Element.ShadowOffsetY, 0);
        Microsoft.UI.Xaml.Media.ShadowDrop.SetShadow(nativeView, shadow);
#endif
    }
}

步骤3：注册 Handler 并使用控件 #

// MauiProgram.cs
builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler<CustomShadowView, CustomShadowViewHandler>();
});

// XAML 使用
<local:CustomShadowView ShadowColor="#66000000" ShadowRadius="8" ShadowOffsetX="3" ShadowOffsetY="3">
    <Label Text="带自定义阴影的内容" Padding="20" BackgroundColor="White"/>
</local:CustomShadowView>

关键说明 #

• MAUI 原生 Shadow 属性在不同平台的渲染逻辑有差异（比如 Android 依赖 Elevation，iOS 依赖 Layer，Windows 依赖 DropShadow），通过 Handler 可以实现跨平台统一的阴影效果。
• 若只需修改个别控件的阴影，方案一更轻量化；若需复用自定义阴影逻辑，方案二更适合。

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