首页 > 解决方案 > 如何使用 Cailburn.Micro 在 DataGrid 内的 DataGrid 中显示属性

问题描述

我正在尝试将 2 个 DataGrids 作为封闭 DataGrid 中选定行的详细信息。ViewModel 除了几个字符串属性外,还有两个列表,如果选择了一行,则应该显示这些列表。在StdMoleculesDataGrid 中选择一行后,应显示行详细信息。ViewModel 中的 Row 详细信息被调用MoleculesElements并且一旦为 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分子的 ,但没有一个成功。

如果我能得到如何正确做的提示,我将非常感激。

干杯,彼得

标签: c#wpfdatagridcaliburn.micro

解决方案


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>

推荐阅读