Question

I have created a custom user control, which is basicly a ItemsControl with it’s ItemsPanelTemplate set to canvas.

On the mainpage I bind a List<Element> to it, where Element is a custom class.

However, all the controls are placed right on top of eachother. A easy way to fix this ofcourse is by making the Canvas a WrapPanel but I’m not sure if this will colide with the ability of Drag & Drop on the control

So my question would be, is it possible to have a property in the model Element which checks on which position it is of a list, if it is in a list?

something like:

public class Element 
{
    public int positionInList { get { return (this.IsInList) ? this.ListPosition : 0; } }
}

Update

What I wish to accomplish is that when the elements are added to the canvas, they automaticly pick their spot by 2 properties (which will be bound to the Canvas.Left and Canvas.Top or something similar)

public double GetX { get { return 50 * (Element.PositionInList % 5); } }
public double GetY { get { return 50 * (Element.PosotionInList / 5); } }

Without manually having to set the element’s position in the list.

Answer 1

When you place elements in a Canvas, you must specify the coordinates where the elements will be placed (left upper corner for each element). Maybe is better to derivate from Canvas a new class that will perform the placement for you and use this class for ItemsPanelTemplate. Also, Drag & Drop should work with WrapPanel but depends on your requirements.

A quick and non optimal sample:

class CustomCanvas : Canvas
{
private int mChildsNum = 0;
...
CustomCanvas()
{
    // Track changes that appear in canvas when new
    // children are added
    this.LayoutUpdated += CanvasChangeTracker;
}
...
private void CanvasChangeTracker(object source, EventArgs e)
{
    if ( this.Children.Count != mChildsNum )
    {
        // A new child was added.
        // Update the coordinates for children
        mChildsNum = this.Children.Count;
    }
}
...
}

This example can be considerably improved.