如何将字典或数组绑定到 UIelement / 图像控件

Question

我有随机的 2 到 6 个图像控件dynamically added，对于每个图像控件，我都有包含该控件数据的字典/数组，即 x1, x2, y1, y1, ans .

如何将数组分配或绑定到每个图像控件？

基本上，我

正在制作一个拖放功能，为此我使用了 Canvas 并将图像放置在其中。 因此，当我image1拖动到区域rect_1（放置图像1的空间）时，我想测试包含数字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 绑定以改用字典即可。