如何將字典或數組綁定到UIelement /圖像控件

Question

我有2到6個隨機隨機dynamically added圖像控件，並且每個字典都有包含該控件數據的字典/數組，即x1, x2, y1, y1, ans 。

如何將數組分配或綁定到每個圖像控件？

基本上，我正在制作拖放功能，為此，我使用了畫布並將圖像放置在其中。 所以當我將image1拖到rect_1區域（放下image1的空間）時，我想測試image1.ans ，其中包含一個數字，即1與rect_1.ans相匹配，以查看image1是否在正確的rect以標記為正確的位置。

我已經搜索過，但是沒有找到如何實現我的情況， 這篇文章使用了xaml，但是我需要在后面的代碼中使用它。 請為此指導我。

這是添加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);

這是檢查其位置是否相同的代碼。

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

使用控件的'Tag'對象屬性並向其添加自定義數據，但是Rect沒有Tag屬性。

_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

感謝您的澄清。 如果您看看我幾周前給試圖畫棋盤的人的答案 ，可能會有所幫助。 本質上，問題是相同的，即試圖在畫布上渲染圖像列表。 我個人將創建一個類來封裝字典中的所有這些字段，但是如果您確實需要字典，那么它也將起作用，您只需將XAML綁定修改為使用字典即可​​。