Binding scattered/overlapping images to a WPF Canvas

Question

I am porting a GDI application over to WPF, where I displayed several dozen images onto Form, then drew polygons, circles, rectangles, etc over the top of these images using GDI Pens and Brushes.

I'm starting to get the hang of WPF binding and would like to store all of these images and markup graphics in my ViewModel.

My VM contains an ObservableCollection of my custom DrawingEntitys, DrawingEntity contains DependencyProperties for BitmapSource, Height, Width, CanvasTopLeftY, and CanvasTopLeftX, that I update frequently in the collection. I know my binding is working, I just can't figure out how to bind and draw this collection onto a Canvas.

I've played around with ItemsControl and ItemsSource to death, too many different ways to list here. I can display the DrawingEntity.Bitmaps onto the canvas but Canvas.Top won't bind to CanvasTopLeftY in the DrawingEntity, everything is overlapped at 0,0. I think I'm missing an obvious strategy. Any ideas?

Answer 1

Have a look at the XAML in this answer and make some slight changes to it.