Xamarin.Forms自定义布局最佳方案：XAML中复用带内容插槽的背景控件

你遇到的问题是因为默认情况下，ContentView的XAML标签内部的内容会直接替换它的Content属性，而不是注入到你指定的InnerStack里。要在XAML层面优雅实现这个需求，我们可以利用**ContentPropertyAttribute**来重写默认的内容接收逻辑，让外部内容自动进入目标容器，完全不需要手动写后台代码添加控件。

步骤1：修改自定义ContentView的后台代码 #

在你的ContentBackground类上添加ContentProperty特性，指定一个用来接收外部内容的属性（比如InnerContent），然后通过绑定属性的变更回调，把内容自动添加到InnerStack中：

using Xamarin.Forms;

[ContentProperty(nameof(InnerContent))]
public partial class ContentBackground : ContentView
{
    // 定义可绑定属性，用来接收外部内容
    public static readonly BindableProperty InnerContentProperty =
        BindableProperty.Create(
            nameof(InnerContent), 
            typeof(View), 
            typeof(ContentBackground), 
            propertyChanged: OnInnerContentChanged);

    public View InnerContent
    {
        get => (View)GetValue(InnerContentProperty);
        set => SetValue(InnerContentProperty, value);
    }

    // 属性变更时，自动更新InnerStack的子控件
    private static void OnInnerContentChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var backgroundControl = (ContentBackground)bindable;
        
        // 先移除旧内容
        if (oldValue is View oldView)
        {
            backgroundControl.InnerStack.Children.Remove(oldView);
        }
        
        // 再添加新内容
        if (newValue is View newView)
        {
            backgroundControl.InnerStack.Children.Add(newView);
        }
    }

    public ContentBackground()
    {
        InitializeComponent();
    }
}

步骤2：保留原有自定义ContentView的XAML结构 #

你的原有布局不需要做任何改动，只要确保StackLayout的x:Name="InnerStack"正确即可：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.ContentBackground">
    <ContentView.Content>
        <ScrollView>
            <StackLayout>
                <RelativeLayout Padding="0" BackgroundColor="Teal" VerticalOptions="Start">
                    <Image Source="TopBG" BackgroundColor="Purple" Aspect="Fill" 
                           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
                           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}" />
                </RelativeLayout>
                <Frame Padding="0" Margin="0,-25,0,0" CornerRadius="25" BackgroundColor="{StaticResource Key=Charcoal}">
                    <StackLayout Margin="0,0,0,0" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" x:Name="InnerStack">
                        <!-- 外部内容会自动注入到这个位置 -->
                    </StackLayout>
                </Frame>
            </StackLayout>
        </ScrollView>
    </ContentView.Content>
</ContentView>

步骤3：在ContentPage中优雅使用自定义控件 #

现在你可以直接在ContentBackground标签内部添加任意内容，这些内容会自动被注入到InnerStack中，完全不会覆盖原有背景布局：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:CustomLayouts="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.HomePage">
    <ContentPage.Content>
        <CustomLayouts:ContentBackground>
            <!-- 这里的所有内容都会自动进入InnerStack -->
            <StackLayout Margin="20" Spacing="15">
                <Label Text="欢迎使用复用背景控件" TextColor="White" FontSize="Large" />
                <Entry Placeholder="输入你的内容" TextColor="White" PlaceholderColor="Gray" />
                <Button Text="提交" BackgroundColor="Orange" TextColor="White" />
            </StackLayout>
        </CustomLayouts:ContentBackground>
    </ContentPage.Content>
</ContentPage>

扩展：支持多个直接子视图（可选） #

如果希望不需要嵌套容器就能直接添加多个子控件，可以把InnerContent改成ObservableCollection<View>类型的可绑定属性，然后监听集合的变更来更新InnerStack的Children。不过上面的方案已经能满足大部分场景，因为你可以在内部嵌套一个StackLayout/Grid来承载多个控件，用法更灵活。

内容的提问来源于stack exchange，提问作者Ulrik. S