如何在MVVM模式下使用AvalonDock创建窗格并分配文档与Anchorable

嘿，我刚好对AvalonDock的布局逻辑比较熟，来帮你解决这个问题！你已经搞懂基础绑定，但卡在创建窗格和添加内容这一步，核心问题是没摸透它的布局容器的属性设计——你找的Children属性其实不是用来加文档/Anchorable的，听我慢慢说：

1. 先理清AvalonDock的布局层级 #

AvalonDock的布局是分层的，不同容器负责不同的职责：

• LayoutDocumentPane：专门用来装LayoutDocument（就是那些可以标签切换、浮动的文档窗口）
• LayoutAnchorablePane：用来装LayoutAnchorable（侧边栏的可停靠面板）
• 这些窗格本身是通过父容器（比如LayoutPanel、LayoutAnchorablePaneGroup）的Children属性来组织层级，但窗格里的内容，得用Items属性来添加，不是Children！

2. 实操示例：XAML和代码两种方式 #

方式一：直接在XAML里写死布局 #

这是最直观的方式，把布局结构直接定义在XAML中：

<avalon:DockingManager x:Name="DockManager" Grid.Row="2" BorderBrush="Black" Margin="3" Background="#FFFDFDFD" BorderThickness="1">
    <avalon:LayoutRoot>
        <!-- 主布局面板，用来组织各个窗格的位置 -->
        <avalon:LayoutPanel Orientation="Horizontal">
            <!-- 文档窗格：装文档内容 -->
            <avalon:LayoutDocumentPane>
                <avalon:LayoutDocument Title="我的第一个文档">
                    <TextBlock Text="这里是文档内容区域" Padding="10" />
                </avalon:LayoutDocument>
                <avalon:LayoutDocument Title="第二个文档">
                    <TextBox Text="可以放任何WPF控件作为内容" Margin="5" />
                </avalon:LayoutDocument>
            </avalon:LayoutDocumentPane>

            <!-- 侧边锚定面板组：用来装锚定面板 -->
            <avalon:LayoutAnchorablePaneGroup DockWidth="220">
                <avalon:LayoutAnchorablePane>
                    <avalon:LayoutAnchorable Title="侧边工具面板" CanClose="False">
                        <ListBox>
                            <ListBoxItem>项目A</ListBoxItem>
                            <ListBoxItem>项目B</ListBoxItem>
                        </ListBox>
                    </avalon:LayoutAnchorable>
                    <avalon:LayoutAnchorable Title="设置面板">
                        <StackPanel>
                            <Label Content="字号：" />
                            <Slider Minimum="8" Maximum="24" />
                        </StackPanel>
                    </avalon:LayoutAnchorable>
                </avalon:LayoutAnchorablePane>
            </avalon:LayoutAnchorablePaneGroup>
        </avalon:LayoutPanel>
    </avalon:LayoutRoot>
</avalon:DockingManager>

方式二：后台代码动态创建 #

如果需要根据业务逻辑动态生成窗格和内容，这么写：

// 1. 创建文档窗格并添加文档
var docPane = new LayoutDocumentPane();
var dynamicDoc = new LayoutDocument { Title = "动态生成的文档" };
dynamicDoc.Content = new TextBlock { Text = "这是代码创建的文档内容", FontSize = 14 };
docPane.Items.Add(dynamicDoc);

// 2. 创建锚定面板并添加侧边内容
var anchorPane = new LayoutAnchorablePane();
var dynamicAnchor = new LayoutAnchorable { Title = "动态侧边面板" };
dynamicAnchor.Content = new Button { Content = "点击触发操作", Margin = new Thickness(5) };
anchorPane.Items.Add(dynamicAnchor);

// 3. 组装布局层级
var rootLayout = new LayoutRoot();
var mainPanel = new LayoutPanel { Orientation = Orientation.Horizontal };
// 把文档窗格加到主面板
mainPanel.Children.Add(docPane);
// 把锚定面板包装成组，加到主面板
mainPanel.Children.Add(new LayoutAnchorablePaneGroup 
{ 
    Children = { anchorPane }, 
    DockWidth = new GridLength(220) 
});
rootLayout.Children.Add(mainPanel);

// 4. 绑定到DockingManager
DockManager.LayoutRoot = rootLayout;

3. 关于你找不到的Children属性 #

你提到ILayoutContainer有Children属性，但为什么用不了？其实是分工不同：

• 父级布局容器（比如LayoutPanel、LayoutAnchorablePaneGroup）的Children是用来添加子窗格的（比如把LayoutDocumentPane加到LayoutPanel里）
• 而具体的窗格（LayoutDocumentPane、LayoutAnchorablePane）是用Items来添加内容项（文档或Anchorable）

这样的设计是为了把布局层级和内容项明确分开，避免混淆~

内容的提问来源于stack exchange，提问作者Сергей Татунов