背景颜色未正确应用

Question

我有这个自定义控件。

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

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

其样式如下：

<Style ApplyToDerivedTypes="True" TargetType="controls:Panel">
    <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>

使用控件时

<control:Panel BackgroundColor="LimeGreen" />

，绿色将应用于整个背景，而不仅仅是边框。我认为 ControlTemplate 上的 TemplateBinding 应该阻止它在基本 ContentView 上设置背景颜色。

Answer 1

将颜色应用于

Stroke

属性：

<Border Style="{StaticResource PanelBorderStyle}"
        Stroke="{TemplateBinding BackgroundColor}" />

也许模板应该包含

Stroke

而不是

BackgroundColor

的值，否则会很混乱。

请参阅：Microsoft / Learn / .NET / .NET MAUI /边框/创建边框

Answer 2

您看到的石灰绿色不是来自边框，而是全部来自

control:Panel

的背景颜色。您没有为边框设置

HeightRequest

或

WidthRequest

。

所以让我们做一个小演示来解释这个场景，

我们添加另一个名为

BorderColor

的 BindableProperty 并为其设置一个值。我们还为面板设置了

HeightRequest

，

<controls:Panel HeightRequest="100" BackgroundColor="LimeGreen" BorderColor="Pink" Caption="this is my text" />

在样式中，将BackgroundColor绑定到它上面，

<Grid>
    <Border BackgroundColor="{TemplateBinding BorderColor}" HeightRequest="50" VerticalOptions="Start" />
    <Label Text="{TemplateBinding Caption}" VerticalOptions="Start"/>
    <ContentPresenter/>
</Grid>

这是截图，

在这里你可以清楚地看到，ContentView的BackgroundColor是Lime Green，Border的BackgroundColor是Pink。