DevExpress MVVM：自定义界面

Question

如果没有mvvm，我正在寻找一种方法为我做什么很简单，但我正在使用这种模式，所以...

我有一个gridcontrol，我在其中加载一组记录。然后，当用户点击时，我填充了一个propertyGridControl它可以工作，但结果是......所以...丑陋!!

我已经想出了我想要的结果：

在第二张图片中，如您所见，用户可以编辑数据，并将字段分组为迷你区域。

哪个是从第一张图片改为第二张图片的最佳方式，尊重mvvm模式？用户界面？模板？或者是什么？有没有工作的例子？

Answer 1

这是我加载自定义propertyGrid的控件。它有元素DockSite（actipro元素），我绑定自定义propertyGrid：

<docking:DockSite viewModels:DockSiteViewModelBehavior.IsManaged="true" CanDocumentWindowsRaft="True" ItemContainerRetentionMode="Wrapped"
                      DocumentItemsSource="{Binding DocumentItems}"
                      ToolItemsSource="{Binding ToolItems}"/>

在viewModel中（在构造函数中）我只是添加了我的propertyGrid：

_toolItems.Add(new PropertyGridToolWindow
                         {
                             Title = "Properties",
                             ViewModel = {DefaultDock = Dock.Right, DockGroup = "2", IsInitiallyAutoHidden = true}
                         });

和_toolItems是：

private readonly ObservableCollection<PropertyGridToolWindow> _toolItems = new ObservableCollection<PropertyGridToolWindow>();