Avalonia如何通过编程方式向UserControl控件添加子控件

Grid公开了Children集合可以直接调用Add方法添加子控件，但UserControl默认没有对外暴露内部布局的操作接口，你可以按照以下步骤实现： #

实现步骤 #

1. 首先确保你的自定义UserControl内部的根节点是继承自Panel的布局容器（Grid、StackPanel、Canvas等都属于这类容器），给根容器设置x:Name标记，示例XAML如下：

<UserControl x:Class="YourCustomNamespace.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 给根Grid设置x:Name为LayoutRoot -->
    <Grid x:Name="LayoutRoot">
        <!-- UserControl原有内容可正常保留 -->
    </Grid>
</UserControl>

2. 在UserControl的后台代码（.xaml.cs）中暴露操作内部布局的入口，两种常用方案二选一即可：

• 方案1：直接暴露内部容器的Children集合，用法和Grid完全一致

public partial class MyUserControl : UserControl
{
    public MyUserControl()
    {
        InitializeComponent();
    }

    // 公开Children集合属性
    public UIElementCollection Children => LayoutRoot.Children;
}

• 方案2：封装专用的添加方法，符合高内聚的封装原则

public partial class MyUserControl : UserControl
{
    public MyUserControl()
    {
        InitializeComponent();
    }

    // 封装添加子控件的方法
    public void AddChild(UIElement childControl)
    {
        if(childControl == null) return;
        LayoutRoot.Children.Add(childControl);
    }
}

3. 外部调用添加控件

• 用方案1的调用方式：

// 实例化自定义UserControl
var myUserControl = new MyUserControl();
// 实例化要添加的子控件，比如Button
var newButton = new Button { Content = "测试按钮" };
// 直接调用Add方法，和Grid的用法完全一致
myUserControl.Children.Add(newButton);

• 用方案2的调用方式：

var myUserControl = new MyUserControl();
var newButton = new Button { Content = "测试按钮" };
myUserControl.AddChild(newButton);

注意事项 #

• 如果UserControl的根节点不是Panel类布局容器，需要先替换为Grid等布局容器才能使用Children的Add方法
• 如果你是要向第三方提供的已编译UserControl添加控件，需要确认该控件是否公开了Add相关的公开方法或布局属性，未公开的封装控件不支持随意新增子控件

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