how to bind dictionary or array to UIelement / Image control

Question

i have random 2 to 6 image controls dynamically added, and for each i have dictionary/array containing data for that control, i.e x1, x2, y1, y1, ans.

How can i assign or bind the array to each image control?

basically i am making a drag and drop feature, and for that i have used canvas and placed the images in it. so when i drag image1 to area rect_1(space to drop the image1) i want to test image1.ans which contains a number i.e 1 to match against rect_1.ans, to see if image1 is at right rect to mark as correct placement.

i have searched but didn't found how to achive my situation, This post uses xaml but i need to make it in code behind. please guide me on this.

This is code to add image1 For now i am not dynamically creating dictionary

_draggedImageData = new Dictionary<string, int>
{
    {"x1", 11},
    {"x2", 144},
    {"y1", 123},
    {"y2", 143},
    {"ss", 0},
    {"a", 0}
};
_draggedImageData["width"] = (int)Math.Sqrt(Math.Pow(_draggedImageData["x2"] - _draggedImageData["x1"], 2) + Math.Pow(_draggedImageData["y2"] - _draggedImageData["y1"], 2)); //Math.Sqrt( Math.Pow(x2 - x1, 2) + Math.Pow(y2 - y1, 2))
_draggedImageData["height"] = _draggedImageData["y2"] - _draggedImageData["y1"]; // y2-y1

// Create a CroppedBitmap.
_cb = new CroppedBitmap(bitmapImage, new Int32Rect(_draggedImageData["x1"], _draggedImageData["y1"], _draggedImageData["width"], _draggedImageData["height"])); //x1, y1 : select region rect

var croppedImage = new Image{Source = _cb};
Canvas.SetLeft(croppedImage, _draggedImageData["x1"]); //x1
Canvas.SetTop(croppedImage, _draggedImageData["y1"]); //y1
_canvas.Children.Add(croppedImage);

this is code to check if its on same position.

private void CanvasMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (_draggedImage == null) return;

    var position = e.GetPosition(_canvas);
    //<m x1="332" x2="465" y1="68" y2="86" ss="1" a="0"></m>
        _draggedImageData2 = new Dictionary<string, int>
        {
            {"x1", 332},
            {"x2", 465},
            {"y1", 68},
            {"y2", 86},
            {"ss", 1},
            {"a", 0}
        };
        _draggedImageData2["width"] = (int)Math.Sqrt(Math.Pow(_draggedImageData2["x2"] - _draggedImageData2["x1"], 2) + Math.Pow(_draggedImageData2["y2"] - _draggedImageData2["y1"], 2)); //Math.Sqrt( Math.Pow(x2 - x1, 2) + Math.Pow(y2 - y1, 2))
        _draggedImageData2["height"] = _draggedImageData2["y2"] - _draggedImageData2["y1"]; // y2-y1


    var myRectangle = new Rect { Location = new Point(Canvas.GetLeft(_draggedImage), Canvas.GetTop(_draggedImage)), Size = new Size(_draggedImageData["width"], _draggedImageData["height"]) };
    var myRectangle2 = new Rect { Location = new Point(_draggedImageData2["x2"], _draggedImageData2["y2"]), Size = new Size(_draggedImageData2["width"], _draggedImageData2["height"]) };
    var doesIntersect = myRectangle.IntersectsWith(myRectangle2);


    if (doesIntersect)
    {
        var croppedImage = new Image
        {
            Source = _cb,
            Margin = new Thickness(_draggedImageData2["x1"], _draggedImageData2["y1"], 0.0, 0.0)
        };
        _canvas.Children.Add(croppedImage);

       //here i want to test if (draggedImageData2["a"] == myRectangle2["a"]) qArr[0].ans = 1; but i don't have myRectangle2 with dictionary values attached.
    }

    Canvas.SetLeft(_draggedImage, _draggedImageData["x1"]);
    Canvas.SetTop(_draggedImage, _draggedImageData["y1"]);

    _canvas.ReleaseMouseCapture();
    _draggedImage = null;
}

Answer 1

Use 'Tag' object property of control and add custom data to it, but Rect dont have Tag property.

_draggedImageData = new Dictionary<string, int>
{
    {"x1", 11},
    {"x2", 144},
    {"y1", 123},
    {"y2", 143},
    {"ss", 0},
    {"a", 0}
};

var croppedImage = new Image{Source = _cb};
croppedImage.Tag = _draggedImageData;

var _draggedImageData3 = new Dictionary<string, int>();
_draggedImageData3 = (Dictionary<string, int>)croppedImage.Tag;

Answer 2

Thanks for the clarification above. It might help if you have a look at an answer I gave a few weeks ago to someone who was trying to draw a chess board. Essentially the problem is the same i.e. trying to render a list of images on a canvas. I personally would create a class to encapsulate all those fields in your dictionary, but if you really do need a dictionary then that will work too and you just adapt your XAML bindings to use a dictionary instead.