WPF平台开发 - 如何将树编辑器添加到数据网格单元中

点击获取工具>>

问题

试图将树编辑器嵌入具有多选功能的网格单元中，如何将视图模型SelectedPerils绑定到弹出树控件中的已检查项目？

解决方案

据了解，目前的目标是使用带有TreeListView的弹出式编辑器来编辑集合属性，本文将为大家解释此操作所需要的步骤。

GridControl不支持编辑使用FieldName绑定的集合属性，您可以更改属性声明，以便它使用对象类型或使用Binding而不是FieldName。请参阅Binding Columns to Data Source Fields，让我们使用第一个选项：

C#

`public object SelectedPerils { get; set; }
//...
SelectedPerils = new List<Peril>();
//...
((List<Peril>)Portfolios[0].SelectedPerils).Add(Portfolios[0].Perils[0]);
((List<Peril>)Portfolios[1].SelectedPerils).Add(Portfolios[1].Perils[1]);
((List<Peril>)Portfolios[2].SelectedPerils).Add(Portfolios[2].Perils[0]);`

XAML

<dxg:GridColumn FieldName="SelectedPerils" />

我们建议使用LookUpEdit在弹出窗口中显示GridControl，使用MultiSelectLookUpEditStyleSettings为其启用多选功能，这是执行此操作的预定义方法。由于您希望将其默认TableView替换为TreeListView，因此需要声明CellTemplate和PopupContentTemplate：

XAML

`<dxg:GridColumn FieldName="SelectedPerils">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxg:LookUpEdit
DisplayMember="Name"
ItemsSource="{Binding RowData.Row.Perils}"
Name="PART_Editor">
<dxg:LookUpEdit.PopupContentTemplate>
<ControlTemplate>
<dxg:GridControl Name="PART_GridControl" SelectionMode="MultipleRow">
<dxg:GridControl.View>
<dxg:TreeListView KeyFieldName="ID" ParentFieldName="ParentID" />
</dxg:GridControl.View>
</dxg:GridControl>
</ControlTemplate>
</dxg:LookUpEdit.PopupContentTemplate>
<dxg:LookUpEdit.StyleSettings>
<dxg:MultiSelectLookUpEditStyleSettings />
</dxg:LookUpEdit.StyleSettings>
</dxg:LookUpEdit>
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>`

您的编辑器应该能够选择嵌套值，因此您需要使用自参考数据结构，这就是为什么在模板中使用KeyFieldName和ParentFieldName属性的原因。 否则，您的LookUpEdit将拒绝其ItemsSource之外的值，因为在那里使用DisplayMember 并打开了查找模式。

C#

`public class Peril {
public int ID { get; set; }
public int ParentID { get; set; } = -1;
//...
}
//...
Perils = new List<Peril>
{
new Peril { Name = "Earthquake", ID = 0},
new Peril { Name = "EQ", ID = 10, ParentID = 0 },
new Peril { Name = "FF", ID = 11, ParentID = 0 },
new Peril { Name = "Hurricane", ID = 1},
new Peril { Name = "HU", ID = 12, ParentID = 1 },
new Peril { Name = "TC", ID = 13, ParentID = 1 },
new Peril { Name = "Tornado Hail", ID = 2},
new Peril { Name = "TH", ID = 14, ParentID = 2 },
new Peril { Name = "WS", ID = 15, ParentID = 2 },
};`

没有使用CheckBoxFieldName属性，但是将SelectionMode设置为MultipleRow，TreeListView的复选框不会影响其选择。 必须使用自定义实现对其进行同步（例如，请参阅带有TreeView - Get选中项的LookupEdit），TreeListView的选择将自动发布到SelectedPerils属性。

这是演示结果如以下截图所示：