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的类，它继承了ObservableCollection Of my PictureModel(Name，Description，Path)。

您在DataGrid上看到的文本框是my DamagedItemModel (Description、Initiales、PicturesList)的属性。因此，当用户单击Accept (Checkmark)按钮时，将DamagedItem添加到DamagedItemsList中，然后将其设置为来自my 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标准的同时，是否可以在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或所有ItemsControl中最好的控件。

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

在这段代码中，您可以这样看待它，就像您有一些StackPanel，第一个有：Image Source="{Binding Pictures(0).Path}"，秒有Image Source="{Binding Pictures(1).Path}"等等。这样，所有绑定路径都指向对象。