.NET MAUI自定义ContentView控件Shadow等属性不生效求助

问题概述 #

使用C#结合CommunityToolkit.Maui.Markup创建自定义ContentView（Elevation），当前Padding和BackgroundColor属性可正常显示，但Shadow、StrokeShape属性未生效，同时对Content属性的使用正确性存疑，寻求解决思路。

自定义控件代码 #

public partial class Elevation : ContentView
{
    public static readonly BindableProperty TapCommandProperty = BindableProperty.Create(
           nameof(TapCommand),
           typeof(ICommand),
           typeof(Elevation),
           default(ICommand));

    public ICommand TapCommand
    {
        get => (ICommand)GetValue(TapCommandProperty);
        set => SetValue(TapCommandProperty, value);
    }

    public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(
        nameof(CornerRadius),
        typeof(CornerRadius),
        typeof(Elevation),
        new CornerRadius(5));

    public CornerRadius CornerRadius
    {
        get => (CornerRadius)GetValue(CornerRadiusProperty);
        set => SetValue(CornerRadiusProperty, value);
    }

    new public static readonly BindableProperty ShadowProperty = BindableProperty.Create(
        nameof(Shadow),
        typeof(Shadow),
        typeof(Elevation),
        new Shadow());

    new public Shadow Shadow
    {
        get => (Shadow)GetValue(ShadowProperty);
        set => SetValue(ShadowProperty, value);
    }

    public Elevation()
    {
        Content = new Border()
        {
            Content = Content
        }.Bind(PaddingProperty, nameof(Padding), source: this)
         .Bind(BackgroundColorProperty, nameof(BackgroundColor), source: this)
         .Bind(ShadowProperty, nameof(Shadow), source: this)
         .Bind(Border.StrokeShapeProperty, nameof(CornerRadius), source: this, converter: new CornerRadiusToRoundRectangleConverter());
    }
}

public class CornerRadiusToRoundRectangleConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if (value is CornerRadius cornerRadius)
        {
            return new RoundRectangle { CornerRadius = cornerRadius };
        }
        return new RoundRectangle { CornerRadius = new CornerRadius(5) };
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

控件调用代码 #

new Elevation()
{
    Padding = 10,
    CornerRadius = new CornerRadius(5, 30, 5, 30),
    TapCommand = new Command(new Action(() => {})),
    Content = new Grid()
    {
        Children =
        {
        new Grid()
        {
            ColumnDefinitions = Columns.Define(25, Star, Star),
            Children =
            {
                new Label()
                    .Text("Hello")
                    .Font(size: 18)
                    .Column(1),
                new MauiIcon()
                    .End()
                    .CenterVertical()
                    .Icon(FontAwesomeSolidIcons.ChevronRight)
                    .IconSize(12.5)
                    .Column(2)
                }
            }
        }
    }
}.AppThemeColorBinding(
    BackgroundColorProperty,
    Colors.Black,
    Colors.White);

解决思路 #

1. Content属性绑定错误 #

构造函数中初始化Border时，Content = Content会将Border的Content设置为Elevation当前的Content（此时还未被外部赋值，为null），正确做法是通过绑定关联Elevation的Content属性到Border：

public Elevation()
{
    Content = new Border()
        .Bind(PaddingProperty, nameof(Padding), source: this)
        .Bind(BackgroundColorProperty, nameof(BackgroundColor), source: this)
        .Bind(Border.ShadowProperty, nameof(Shadow), source: this)
        .Bind(Border.StrokeShapeProperty, nameof(CornerRadius), source: this, converter: new CornerRadiusToRoundRectangleConverter())
        .Bind(ContentProperty, nameof(Content), source: this); // 添加这行绑定
}

2. Shadow属性冲突与显示问题 #

• 用new关键字隐藏了ContentView基类的Shadow属性，会导致属性变更通知异常，建议直接移除自定义的ShadowProperty，使用基类的Shadow属性，绑定到Border的ShadowProperty即可。
• 默认Shadow的Opacity为0，不会显示效果，调用控件时需设置Shadow的具体参数：

new Elevation()
{
    // ...其他属性
    Shadow = new Shadow
    {
        Opacity = 0.6,
        Radius = 8,
        Offset = new Point(0, 3)
    },
    // ...
}

3. StrokeShape未生效排查 #

• 验证转换器：先手动设置Border的StrokeShape测试是否生效，排除转换器问题：

// 在构造函数中临时添加
StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(5,30,5,30) }

• 添加Stroke样式：如果Border没有设置Stroke和StrokeThickness，圆角边框可能无法直观看到，需补充设置：

// 在Border的绑定中添加
.Bind(Border.StrokeProperty, nameof(Stroke), source: this) // 绑定或直接设置颜色
.Bind(Border.StrokeThicknessProperty, nameof(StrokeThickness), source: this) // 设置厚度，比如1

• 绑定模式设置：给StrokeShape的绑定加上Mode=BindingMode.OneWay，确保值能正确传递：

.Bind(Border.StrokeShapeProperty, nameof(CornerRadius), source: this, converter: new CornerRadiusToRoundRectangleConverter(), mode: BindingMode.OneWay)

4. TapCommand未触发问题 #

当前自定义控件未添加TapGestureRecognizer，需在Border上添加并绑定TapCommand：

public Elevation()
{
    Content = new Border()
    {
        GestureRecognizers =
        {
            new TapGestureRecognizer().Bind(TapGestureRecognizer.CommandProperty, nameof(TapCommand), source: this)
        }
    }
    // ...其他绑定
}

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