5

ゴール

MVVM 標準を使用して、DataGrid の RowDetails テンプレートに複数の画像を追加します。

バックグラウンド

破損したアイテムの説明とインスペクターのイニシャルを保持するように設計された DataGrid を備えたインスペクション ウィンドウがあります。さらに、この DataGrid の RowDetailsTemplate は、インスペクターが撮影した破損したアイテムの写真を保持する必要があります (そのため、破損したアイテムの写真が複数ある場合があります)。

問題

DamagedItem エントリを作成するために設計された DamagedWindow.xaml があります。次のようになります。

RowDetails の作業

データグリッド (.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 で正常に機能します。私の PictureModel( Name、Description、Path) の ObservableCollection を継承する PicturesList という名前のクラスがあります。

DataGrid の上に表示されるテキスト ボックスは、私の DamagedItemModel ( Description、Initiales、PicturesList) のプロパティです。したがって、ユーザーが Accept (チェックマーク) ボタンをクリックすると、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に複数の画像を追加することは可能ですか? もしそうなら、私は何を間違っていますか？

4

1 に答える 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>

メソッドが機能しなかった理由は、バインディング ソースが常に Binding Path によって設定された 1 つのオブジェクトであり、オブジェクトにがなく、そのアイテムに.Pictures.PathPicturesPathPath

一般に、ある種のコレクションを扱っていることに気付いたときはいつでも、コレクションを表示するのに適したコントロールを考えListBoxてDataGridくださいItemsControl。

ItemTemplateこれらのコントロール内にあるものはすべてDataContext、対応するアイテムに自動的に設定されるため、心配する必要はありません。をItemsSourceコレクションに設定し、内部のバインディング パスTypeをそのコレクションのプロパティに設定するだけで、各アイテムのデータを探す場所がわかります。

このコードでは、このように考えることができます。いくつかStackPanelの s があるように、最初の s には : Image Source="{Binding Pictures(0).Path}"、秒には : などがImage Source="{Binding Pictures(1).Path}"あります。このようにして、すべてのバインディング パスがオブジェクトを指します。

于 2013-11-08T18:50:00.857 に答える