具有多个图像的 WPF DataGrid RowDetailsTemplate (MVVM)

Question

目标

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

背景

我有一个带有 DataGrid 的检查窗口，用于保存损坏项目的描述以及检查员的姓名首字母。更重要的是，这个 DataGrid 的 RowDetailsTemplate 需要保存检查员为损坏项目拍摄的照片(因此可能会有不止一张损坏项目的照片)。

问题

我有一个 DamagedWindow.xaml 旨在创建我的 DamagedItem 条目。它看起来像这样:



数据网格 (.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)。因此，当用户单击接受(复选标记)按钮时，将 DamagedItem 添加到 DamagedItemsList，然后从我的 MainWindow 将其设置为 DataGrid 的 ItemSource:



数据网格 (.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

你不能那样绑定(bind)。你需要这样做:

        <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>

您的方法不起作用的原因是 Binding 源始终是由 Binding Path 设置的一个对象，而您的 Binding Path 是 Pictures.Path这导致什么都没有，因为 Pictures对象没有 Path ，它的项目有 Path .

通常，每当您发现自己在处理某种集合时，请考虑一个适合显示集合的控件，例如 ListBox , DataGrid或最好的 ItemsControl .

里面的任何东西 ItemTemplate在这些控件中，有它们的 DataContext自动设置到对应的项目，所以你不必担心。您所要做的就是设置 ItemsSource到您的集合并将里面事物的绑定(bind)路径设置为 Type 的属性该集合，以便它知道在哪里查找每个项目的数据。

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