如何实现可嵌入多UI控件的WPF自定义UserControl？

1. 定义MyControl后台类 #

要让控件支持多个子元素嵌入，核心是声明自定义子元素集合并标记为默认内容属性：

• 声明ObservableCollection<UIElement>存储嵌入的子控件，支持动态增删时自动更新UI
• 用ContentPropertyAttribute标记该集合，让XAML中直接编写的子元素自动加入集合
• 注册依赖属性，确保集合能被XAML绑定使用

代码示例：

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;

[ContentProperty(nameof(ContentItems))]
public partial class MyControl : UserControl
{
    public ObservableCollection<UIElement> ContentItems
    {
        get => (ObservableCollection<UIElement>)GetValue(ContentItemsProperty);
        set => SetValue(ContentItemsProperty, value);
    }

    public static readonly DependencyProperty ContentItemsProperty =
        DependencyProperty.Register(nameof(ContentItems), typeof(ObservableCollection<UIElement>), typeof(MyControl),
            new PropertyMetadata(new ObservableCollection<UIElement>()));

    public MyControl()
    {
        InitializeComponent();
    }
}

2. 编写MyControl的XAML布局 #

按照需求构建带背景边框、标题、分隔线的垂直布局，通过ItemsControl将自定义集合绑定到渲染容器：

<UserControl x:Class="YourNamespace.MyControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Border Background="AliceBlue" Padding="8" CornerRadius="4">
        <StackPanel>
            <!-- 标题标签 -->
            <Label Content="自定义控件标题" FontSize="14" FontWeight="Bold"/>
            <!-- 分隔线 -->
            <Separator Margin="0,4,0,4"/>
            <!-- 子元素渲染容器：绑定ContentItems集合，用StackPanel作为布局面板 -->
            <ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=ContentItems}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </StackPanel>
    </Border>
</UserControl>

3. 使用MyControl #

现在可以直接在父控件中嵌入多个子元素，不会再出现"Content不能包含多个控件"的错误：

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourNamespace">
    <Grid>
        <local:MyControl>
            <Button Content="操作按钮"/>
            <TextBox Text="输入内容"/>
            <CheckBox Content="选项开关"/>
        </local:MyControl>
    </Grid>
</Window>

关键问题说明 #

• 之前用ContentPropertyAttribute无效，是因为没有将自定义集合绑定到XAML中的渲染容器，导致子元素仅存入集合但未被渲染
• 无需继承Panel类，Panel需要自行实现布局逻辑，对于你的需求，UserControl配合ContentProperty+ItemsControl是更轻量化的方案
• 使用ObservableCollection而非普通集合，是为了支持子元素动态增删时自动同步UI

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