WPF DataGrid RowDetailsTemplate with Multiple Images (MVVM)

Question

purpose

Adding multiple images to a DataGrid RowDetails template using MVVM standards.

Background

I have an inspection window with a DataGrid designed to store a description of a damaged item along with the initials of the inspector. Moreover, this DataGrid RowDetailsTemplate must contain photos that the inspector took from the damaged item (so there can be more than one image of the damaged item).

Problem

I have DamagedWindow.xaml designed to create DamagedItem records. It looks like this:

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 PictureModel (Name, Description, Path).

---

, DataGrid, DamagedItemModel (Description, Initiales, PicturesList). , Accept (Checkmark), DamagedItem DamagedItemsList, ItemSource DataGrid MainWindow:

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

, : RowDetailsTemplate DataGrid MVVM? , ?

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 s, : Image Source="{Binding Pictures(0).Path}", Image Source="{Binding Pictures(1).Path}" . , .