如何将UserControl视图模型的TabbedGroup绑定至主窗口对应元素？

错误原因分析 #

你遇到的InvalidCastException是因为主窗口的DataContext是MainWindowViewModel，强行将其转换为MainMenuViewModel类型必然失败——菜单UserControl有独立的ViewModel实例，和主窗口ViewModel不属于同一类型。

方案1：通过依赖属性传递TabbedGroup（简单直接） #

这种方式适合小型项目，直接将主窗口的TabbedGroup传递给菜单UserControl：

1. 在UCMainMenu中定义依赖属性：

public static readonly DependencyProperty TargetTabbedGroupProperty =
    DependencyProperty.Register("TargetTabbedGroup", typeof(TabbedGroup), typeof(UCMainMenu));

public TabbedGroup TargetTabbedGroup
{
    get => (TabbedGroup)GetValue(TargetTabbedGroupProperty);
    set => SetValue(TargetTabbedGroupProperty, value);
}

2. 在UCMainMenu的Loaded事件中，把依赖属性的值传递给自身ViewModel：

private void UCMainMenu_Loaded(object sender, RoutedEventArgs e)
{
    if (DataContext is MainMenuViewModel vm)
    {
        vm.MainTabbedGroup = TargetTabbedGroup;
    }
}

3. 主窗口XAML中绑定依赖属性：

<view:UCMainMenu Grid.Row="1" TargetTabbedGroup="{Binding ElementName=MainTabbedGroup}"/>

此时菜单ViewModel的MainTabbedGroup就会指向主窗口的实例，点击菜单添加面板的逻辑即可正常运行。

方案2：事件通知（解耦型，适合复杂项目） #

通过事件聚合器（比如Prism的EventAggregator）实现ViewModel间解耦，避免直接持有视图元素：

1. 定义事件类：

public class AddPanelRequest
{
    public LayoutPanel Panel { get; set; }
}

2. 主窗口ViewModel订阅事件：

private readonly IEventAggregator _eventAggregator;

public MainWindowViewModel(IEventAggregator eventAggregator)
{
    _eventAggregator = eventAggregator;
    _eventAggregator.GetEvent<PubSubEvent<AddPanelRequest>>().Subscribe(HandleAddPanel);
}

private void HandleAddPanel(AddPanelRequest request)
{
    MainTabbedGroup.Add(request.Panel);
}

3. 菜单ViewModel发布事件：

private readonly IEventAggregator _eventAggregator;

public MainMenuViewModel(IEventAggregator eventAggregator)
{
    _eventAggregator = eventAggregator;
}

// 菜单命令逻辑
NavigateCommand = new DelegateCommand(() =>
{
    LayoutPanel layoutPanel = new();
    _eventAggregator.GetEvent<PubSubEvent<AddPanelRequest>>()
        .Publish(new AddPanelRequest { Panel = layoutPanel });
});

方案3：纯MVVM集合绑定（推荐） #

避免ViewModel持有视图控件实例，改用集合绑定实现：

1. 主窗口ViewModel定义面板集合：

public ObservableCollection<LayoutPanel> PanelCollection { get; } 
    = new ObservableCollection<LayoutPanel>();

2. 主窗口XAML绑定集合：

<dxdo:TabbedGroup Name="MainTabbedGroup" ItemsSource="{Binding PanelCollection}"/>

3. 菜单通过事件或主ViewModel引用，直接向集合添加元素：

// 以事件方式为例，发布添加请求时直接传面板
_eventAggregator.GetEvent<PubSubEvent<LayoutPanel>>().Publish(layoutPanel);

// 主ViewModel订阅后添加到集合
private void HandleAddPanel(LayoutPanel panel)
{
    PanelCollection.Add(panel);
}

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