具有多个映像的WPF DataGrid RowDetailsTemplate（MVVM）

Question

目标

使用MVVM标准在DataGrid的RowDetails模板中添加多个图像。

背景

我有一个带有DataGrid的检查窗口，用于保存损坏项目的描述以及检查器的首字母。更重要的是，这个DataGrid的RowDetailsTemplate需要保存检查员拍摄的损坏物品的图片（因此可能存在多张损坏物品的图片）。

问题

我有一个DamagedWindow.xaml，用于创建我的DamagedItem条目。它看起来像这样：

DataGrid（.XAML）

<DataGrid ItemsSource="{Binding Pictures}" SelectedItem="{Binding SelectedPicture}" AutoGenerateColumns="False" Grid.Column="1" Grid.Row="2" Margin="5" HorizontalAlignment="Stretch" Name="DataGrid1" VerticalAlignment="Stretch" CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Titre" Binding="{Binding Name}" Width="*" />
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Image Height="100" Source="{Binding Path}" />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

如您所见，我的RowDetails模板在此DataGrid中正常工作。我有一个名为PicturesList的类，它继承了我的PictureModel（Name，Description，Path）的ObservableCollection。

---

您在DataGrid上方看到的文本框是我的DamagedItemModel（Description，Initiales，PicturesList）的属性。因此，当用户单击Accept（选中标记）按钮时，DamagedItem将添加到DamagedItemsList，然后从MainWindow将其设置为DataGrid的ItemSource：

DataGrid（.XAML）

<DataGrid ItemsSource="{Binding Path=DamagedItems}" SelectedItem="{Binding Path=SelectedDamagedItem}" AutoGenerateColumns="False" Name="DataGrid1" Height="250" Margin="3" IsEnabled="True" CanUserAddRows="False" FontSize="16">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Description" Width="*" Binding="{Binding Description}"/>
        <DataGridTextColumn Header="Initiales" Width="70" Binding="{Binding Initiales}"/>
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Image Height="100" Source="{Binding Pictures.Path}" />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

这里当我选择行时，我得到一个空的RowDetailsTemplate结果......即使我的对象包含我的图像。有关详细信息，请参见下文：

所以这是我的问题，是否可以在遵循MVVM标准的同时将多个图像添加到DataGrid中的RowDetailsTemplate？如果是的话，我做错了什么？

Answer 1

你无法以这种方式绑定。你需要这样做：

        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding Pictures}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Height="100" Source="{Binding Path}"/>
                                <TextBlock Text="{Binding Name}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>

你的方法不起作用的原因是绑定源总是一个由绑定路径设置的对象，以及你的绑定路径 Pictures.Path导致什么都没有，因为Pictures对象没有Path，它的项目有Path。

一般情况下，每当您发现自己处理某种类型的集合时，请考虑适合展示集合的控件，例如ListBox，DataGrid或最好的{{1} }。

这些控件ItemsControl内的任何内容都会将ItemTemplate自动设置为对应项，因此您无需担心。您所要做的就是将DataContext设置为您的集合，并将内部事物的绑定路径设置为该集合的ItemsSource的属性，以便它知道在哪里查找每个项目的数据。

在此代码中，您可以这样思考，就像您有一些Type一样，第一个有：StackPanel，秒有Image Source="{Binding Pictures(0).Path}"，依此类推。这样所有绑定路径都指向一个对象。