如何将 ListViewItem 拖放到 Canvas 上并渲染项目包含的图像？

Question

我有一个“模块”类型的自定义对象，我在其中存储了一个图像和一个名称。这些对象存储在 ListView 中，我将它们拖放到 Canvas 上，这样我就可以排列它们（有点像拼图）。首先，我只是画了图像：

var module = e.Data.GetData("MyFormat") as Module;
Canvas CanvasView = sender as Canvas;

Image image = new Image();
image.Source = module.ModuleImage;

Point enterPoint = e.GetPosition(this.moduleCanvas);

Point PointToDraw = new Point(0, 0);
PointToDraw.X = enterPoint.X - DropPosition.X;
PointToDraw.Y = enterPoint.Y - DropPosition.Y;

//+35 and +43 so the Module gets dropped in the way you picked it up
image.SetValue(Canvas.LeftProperty, PointToDraw.X + 35);
image.SetValue(Canvas.TopProperty, PointToDraw.Y + 43);

CanvasView.Children.Add(image);

但后来我意识到，我需要一个对象在画布上，而不仅仅是一个图像，所以我尝试了这个：

ListViewItem lvitem = new ListViewItem();
var module = e.Data.GetData("MyFormat") as Module;
Canvas CanvasView = sender as Canvas;

lvitem.Content = module;
CanvasView.Children.Add(lvitem);

但这当然不会在画布上渲染图像。它只是告诉我MyNamespace.Module。如何让 Canvas 呈现 ListViewItem 包含的对象的图像？

Answer 1

如果您的Module 类的Image 属性返回一个实际的Image 元素，您可以将Content 属性设置为这个：

lvitem.Content = module.Image;

如果Image 返回一个路径，您可以将Content 属性设置为带有ContentTemplate 的ContentTemplate，您可以使用FrameworkElementFactory 或XamlReader.Parse 以编程方式创建该属性。在ContentTemplate 中，您定义Image 元素：

ContentControl cc = new ContentControl();
cc.Content = new LongTextConverter();

FrameworkElementFactory frameworkElementFactory = new FrameworkElementFactory(typeof(Image));
frameworkElementFactory.SetBinding(Image.SourceProperty, new Binding("Image"));
cc.ContentTemplate = new DataTemplate() { VisualTree = frameworkElementFactory };

lvitem.Content = cc;

或者使用ListView 和Canvas 作为ItemsPanel。有关示例，请参阅this answer。然后，您可以将ListView 的ItemsSource 设置为IEnumerable<Module>，并定义将应用于每个Module 的ItemTemplate。