Multiple Image in Canvas ItemsControl

Question

I want to show multiple image on a canvas. I need to position them differently in the canvas. I made a class for my images :

class MapItem:Image
{
  public         


        

Answer 1

I don't quite understand why after all you invented the DistanceToLeft and DistanceToTop properties and then struggle with binding. If you want to use Image controls as items, why not directly apply the attached properties Canvas.Left and Canvas.Top:

All = new ObservableCollection(); // no need for derived MapItem
var wSource = new BitmapImage(new Uri(@"ImagePath")); 
var wImage = new Image { Source = wSource }; 
Canvas.SetLeft(wImage, 20);
Canvas.SetTop(wImage, 20);
All.Add(wImage); 

Hence, no need for a Style:

---

However, you should consider to create a real ViewModel class that is not a control, something like this:

public class ImageItem
{
    public string Source { get; set; }
    public double Left { get; set; }
    public double Top { get; set; }
}

Use it similar to your MapItem class

All = new ObservableCollection();
ImageItem image = new ImageItem { Source = @"ImagePath", Left = 20, Top = 20 };
All.Add(image);

You would now define an ItemContainerStyle like this: