c# - 如何使用 Cailburn.Micro 在 DataGrid 内的 DataGrid 中显示属性
问题描述
我正在尝试将 2 个 DataGrids 作为封闭 DataGrid 中选定行的详细信息。ViewModel 除了几个字符串属性外,还有两个列表,如果选择了一行,则应该显示这些列表。在StdMolecules
DataGrid 中选择一行后,应显示行详细信息。ViewModel 中的 Row 详细信息被调用Molecules
,Elements
并且一旦为 a 的分子和元素选择了一行,就会对其进行SelectedMolecule
设置MoleculeModel
。
ViewModel 看起来像这样(为简洁起见,省略了样板文件)
public class MoleculeManagementViewModel : Screen
{
:
:
public int Id {...} // all properties with backingfields and Notify
public string Name {...}
public string MolecularFormula {...}
public BindableCollection<MoleculeModel> Molecules {...}
public BindableCollection<ElementModel> Elements {...}
public BindableCollection<MoleculeModel> StdMolecules {...}
public MoleculeModel SelectedMolecule {...}
:
:
}
theMoleculeModel
和 theElementModel
如下
public class MoleculeModel
{
public int Id {..}
public int Name {..}
public int MolecularFormula {..}
public List<MoleculeModel> Molecules {...} // every molecule may have other molecules as building blocks
public List<ElementModel> Elements {...} // elements forming a molecule
}
public class ElementModel
{
public int Id {..}
public int Name {..}
public int Symbol {..}
}
我使用以下 XAML 来呈现页面对象中的数据结构。我只尝试显示列表的Id
属性,Molecuels
因为一旦理解了机制,其他机制就会随之而来。
但我没有设法实现它。:-(
<StackPanel Orientation="Vertical">
<Grid Margin="10">
<DataGrid x:Name="StdMolecules" AutoGenerateColumns="False" SelectedItem="{Binding SelectedMolecule}"
CanUserAddRows="False" CanUserDeleteRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Strukturfomel" Binding="{Binding MolecularFormula}"/>
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="5">
<!-- Constituent Molecule Grid -->
<Grid Margin="5">
<DataGrid x:Name="Molecules" AutoGenerateColumns="False"
CanUserDeleteRows="False" CanUserAddRows="False">
<DataGrid.Columns>
<!-- I try to display the 'Id' property of each molecule in the 'Molecules' in the ViewModel -->
<DataGridTextColumn Header="Id" Binding="{Binding MoleculeModel.Id}"/>
<DataGridTextColumn Header="Name" />
<DataGridTextColumn Header="Strukturformel"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
<!-- Constituent Element Grid -->
<Grid Margin="5">
<DataGrid x:Name="Elements" AutoGenerateColumns="False"
CanUserDeleteRows="False" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Id"/>
<DataGridTextColumn Header="Name"/>
<DataGridTextColumn Header="Symbol"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>
</StackPanel>
我尝试了许多不同的方法来显示Id
分子的 ,但没有一个成功。
如果我能得到如何正确做的提示,我将非常感激。
干杯,彼得
解决方案
cal:Bind.Model
将附加属性绑定到MoleculeModel
:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="5">
<Grid Margin="5">
<DataGrid x:Name="Molecules" cal:Bind.Model="{Binding}"
AutoGenerateColumns="False"
CanUserDeleteRows="False" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
//...
</DataGrid.Columns>
</DataGrid>
</Grid>
...
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
推荐阅读
- wordpress - Wordpress Elementor:如何在页面之间保持块不变?
- jquery - jQuery - 单击时重置文件输入和更新按钮
- python - 通过反转的列值重新索引行
- hashset - 如果有很多输入和删除,哈希集的空间复杂度会更差吗?
- javascript - 我得到 /bin/sh: [npm: not found error while execution the react image in Docker
- python - 使用矢量化访问过滤 Numpy 元组数组
- reactjs - 具有可调整大小的列和拖放列的 Ant Design Table 示例?
- javascript - 从链接打开可折叠部分
- javascript - 如何从标题标签中提取文本,换行
- 并附加到列表,使用jQuery
- python - HTML订单列表与django模板中的未排序列表混淆