自定义Panel控件BackgroundColor未仅作用于边框的问题咨询

你的Panel继承自ContentView，而ContentView本身自带BackgroundColor属性。当你设置<control:Panel BackgroundColor="LimeGreen"/>时，这个值会同时作用于两个地方：

• 一是通过TemplateBinding传递给了ControlTemplate里的Border；
• 二是ContentView自身的背景也会被设置为该颜色，导致整个控件区域都显示绿色，而非仅边框。

方法一：自定义专属边框背景属性（推荐） #

新增一个独立的绑定属性，彻底和基类的BackgroundColor划清界限，避免冲突：

1. 修改C#控件代码

public class Panel : ContentView
{
    public static readonly BindableProperty CaptionProperty =
        BindableProperty.Create(nameof(Caption), typeof(string), typeof(Panel), "");

    public string Caption
    {
        get { return (string)GetValue(CaptionProperty); }
        set { SetValue(CaptionProperty, value); }
    }

    // 新增边框背景专属属性
    public static readonly BindableProperty BorderBackgroundColorProperty =
        BindableProperty.Create(nameof(BorderBackgroundColor), typeof(Color), typeof(Panel), Colors.Transparent);

    public Color BorderBackgroundColor
    {
        get { return (Color)GetValue(BorderBackgroundColorProperty); }
        set { SetValue(BorderBackgroundColorProperty, value); }
    }
}

2. 更新Style中的绑定目标

<Style ApplyToDerivedTypes="True" TargetType="controls:Panel">
    <!-- 强制基类背景透明，彻底消除干扰 -->
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="ControlTemplate">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Border Style="{StaticResource PanelBorderStyle}" 
                            BackgroundColor="{TemplateBinding BorderBackgroundColor}" />
                    <Label Style="{StaticResource PanelCaptionLabelStyle}"
                           Text="{TemplateBinding Caption}" />
                    <ContentPresenter Margin="10,17,10,12" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

3. 使用方式

<control:Panel BorderBackgroundColor="LimeGreen" />

方法二：强制ContentView背景透明（快速修复） #

如果不想新增属性，可直接在Style中强制将Panel的BackgroundColor默认设为透明，这样外部设置的颜色只会作用于Border：

<Style ApplyToDerivedTypes="True" TargetType="controls:Panel">
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="ControlTemplate">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Border Style="{StaticResource PanelBorderStyle}" 
                            BackgroundColor="{TemplateBinding BackgroundColor}" />
                    <Label Style="{StaticResource PanelCaptionLabelStyle}"
                           Text="{TemplateBinding Caption}" />
                    <ContentPresenter Margin="10,17,10,12" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

• 方法一：属性职责清晰，避免后续和基类属性产生混淆，适合长期维护的项目；
• 方法二：代码改动最小，适合快速解决现有问题。

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