WPF:使用指定的x行和y列动态创建一个网格,每个单元格中包含静态图像

Question

问题: 我是WPF的新手,我无法弄清楚这一点.如何创建具有x行和y列的网格,并在运行时将图像插入每个单元格？

场景: 我有一个库存项目,最终用户将搜索项目,应用程序将指定他可以在哪里找到该项目.现在我已经检索了保存物品的柜子细节,这些物品又有一排x行和y列.显示的机架可以具有不同的行或列大小.请参见图像.

方法: 所以我想出的是我应该有一个x行和y列的网格(仅在运行时知道).为每个单元格值填充图像.将不同的图像插入到项目的位置或突出显示该单元格值.但我无法找到如何做到这一点.我的大多数搜索都指向动态添加行和列.我错过了很明显的东西吗？

预期输出: 以下是我希望它显示给我的最终用户的方式:

Answer 1

就像我说的，我总是想知道在拥有静态数据的情况下是否需要使用数据网格。这就是我想出的办法。我创建一个堆栈面板并添加 y 图像。现在我添加 x 这样的堆栈面板。如果图像的确切位置出现，我会添加突出显示的图像。工作完美。为任何想要重用代码的人共享代码。

private void CreateGraphicalDisplay(int rows,int columns,int row,int column)
    {
        ClearGraphicPanel();
        for (int i = 1; i <= rows; i++)
        {

        StackPanel childstack = new StackPanel();


            for (int j = 1; j <= columns; j++)
            {
                Image gage = new Image();
                gage.Stretch = Stretch.Fill;

                if (i == row && j == column)
                {
                    gage.Source = new BitmapImage(new Uri(@Highlightedimage));
                }
                else
                {
                    gage.Source = new BitmapImage(new Uri(@NormalImage));
                }
                gage.Width = 12;
                gage.Height =12;
                gage.HorizontalAlignment = HorizontalAlignment.Left;
                gage.Margin = new Thickness(10, 1, 1, 1);

                childstack.Children.Add(gage);
            }

            containerstack.Children.Add(childstack);
        }

    }