logo标签列表

WPF数据网格行详细模板与多个图像（MVVM）

wpfvb.netmvvmdatagridrowdetailstemplate
5

目标

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

背景

我有一个检查窗口，其中包含一个DataGrid，用于保存损坏物品的描述以及检查员的姓名首字母缩写。此外，这个DataGrid的RowDetails模板需要保存检查员拍摄的损坏物品照片（因此可能会有多张照片）。

问题

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

RowDetails working

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上方看到的文本框是我的DamagedItemModel (Description, Initiales, PicturesList)的属性。因此，当用户点击接受（勾选）按钮时，DamagedItem将被添加到DamagedItemsList中，然后将其设置为MainWindow中DataGrid的ItemSource：

Empty RowDetails

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为空...尽管我的对象包含图片。请参见以下详细信息：

受损物品属性

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

1个回答
5
你不能以那种方式绑定。你需要像这样做：
        <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，它的Items才有Path。
通常情况下，当你处理某种类型的集合时，考虑使用适合显示集合的控件，如ListBox、DataGrid或最好的ItemsControl。
这些控件中的ItemTemplate中的任何内容都会自动将其DataContext设置为相应的项，因此您不必担心它。您所要做的就是将ItemsSource设置为您的集合，并将其中的内容的绑定路径设置为该集合的Type的属性，以便它知道在哪里查找每个项的数据。
在这段代码中，你可以这样想，就像你有一些StackPanel，第一个有：Image Source="{Binding Pictures(0).Path}"，第二个有：Image Source="{Binding Pictures(1).Path}"，以此类推。这样所有的绑定路径都指向一个对象。
搞定了。你能解释一下你的答案吗？我不确定为什么我需要一个ItemsControl，或者为什么我的方法完全错误.. - Alex
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接