Xamarin.Forms自定义ContentFrame如何整合标题Label的配置逻辑

该需求可通过扩展现有ContentFrame类完全实现，改造后可直接使用目标简洁XAML写法，且完全不破坏原有Frame的使用逻辑。

核心实现逻辑 #

• 新增Heading对应的可绑定属性，满足XAML中Heading="ABC"的赋值要求
• 在类内部预先实例化标题Label控件，根据Heading的取值动态调整布局：有有效标题时将Label插入内容栈最顶部，标题为空时自动移除，避免多余占位
• 保留原有[Xamarin.Forms.ContentProperty("Contents")]的标注逻辑，保证用户在标签内部写的自定义内容仍会按原有规则追加到Frame内容区

改造后的完整类代码 #

[Xamarin.Forms.ContentProperty("Contents")]
public class ContentFrame : CustomFrame
{
    // 内置的标题Label，可根据项目样式调整默认属性
    private readonly Label headingLabel = new Label()
    {
        // 可根据项目实际样式设置默认值，也可绑定动态资源对齐全局主题
        FontSize = 18,
        FontAttributes = FontAttributes.Bold,
        Padding = new Thickness(0, 0, 0, 10) // 标题与下方内容的间距
    };

    private readonly StackLayout contentStack = new StackLayout()
    {
        Spacing = 0,
        Padding = new Thickness(12), // Frame内容的统一边距，可根据样式调整
        Orientation = StackOrientation.Vertical
    };

    // 定义Heading可绑定属性，支持XAML赋值与主题绑定
    public static readonly BindableProperty HeadingProperty = BindableProperty.Create(
        propertyName: nameof(Heading),
        returnType: typeof(string),
        declaringType: typeof(ContentFrame),
        defaultValue: string.Empty,
        propertyChanged: OnHeadingChanged);

    public string Heading
    {
        get => (string)GetValue(HeadingProperty);
        set => SetValue(HeadingProperty, value);
    }

    // 对外暴露的内容集合，和原有逻辑保持一致
    public IList<View> Contents { get => contentStack.Children; }

    public ContentFrame()
    {
        Content = contentStack;
        HasShadow = false;
        // 原有样式动态资源绑定逻辑保留
        SetDynamicResource(BackgroundColorProperty, "ContentFrameBackgroundColor");
        SetDynamicResource(BorderColorProperty, "ContentFrameBorderColor");
        SetDynamicResource(CornerRadiusProperty, "ContentFrameCornerRadius");
        // 标题Label的样式也可绑定动态资源，跟全局字体颜色对齐
        headingLabel.SetDynamicResource(Label.TextColorProperty, "ContentFrameHeadingTextColor");
    }

    // Heading值变化时的处理逻辑
    private static void OnHeadingChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var currentFrame = (ContentFrame)bindable;
        var headingText = newValue?.ToString() ?? string.Empty;

        // 无有效标题时，确保标题Label从布局中移除
        if (string.IsNullOrWhiteSpace(headingText))
        {
            if (currentFrame.contentStack.Children.Contains(currentFrame.headingLabel))
            {
                currentFrame.contentStack.Children.Remove(currentFrame.headingLabel);
            }
            return;
        }

        // 有有效标题时，将标题插入布局最顶部
        currentFrame.headingLabel.Text = headingText;
        if (!currentFrame.contentStack.Children.Contains(currentFrame.headingLabel))
        {
            // 插入到索引0的位置，保证标题在所有用户自定义内容的最上方
            currentFrame.contentStack.Children.Insert(0, currentFrame.headingLabel);
        }
    }
}

改造后的使用效果 #

改造完成后，无需再单独在Frame外部编写标题Label，直接使用以下写法即可复现原有视觉效果：

<t:ContentFrame Heading="ABC">
   <Label Text="ABC" />
</t:ContentFrame>

可扩展优化点 #

• 内置标题的所有样式（字重、字号、颜色、内边距）均可通过绑定全局动态资源对齐项目主题，无需在使用处重复配置
• 若后续需要支持复杂自定义标题，可将Heading属性的类型从字符串调整为View，直接支持传入任意自定义布局作为标题内容

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