WPF : Dynamically create a grid with specified x rows and y columns with static image in each cell

Question

Question: I am new to WPF and i am not able to figure out this. How do i create a grid with x rows and y columns and insert image into each cell at run time ?

Scenario: I have an inventory project where the end user will search for a item and the application will specify where he can find the item. Now i am already retrieving the cabinet details where the items are kept which again have a rack of x rows and y columns . The rack being displayed can have different row or column sizes.See Image.

Approach: So what i figured out is that i should have a grid of x rows and y columns (known only at run time). Fill an image for each cell value. Insert a different image into the location of the item or highlight that cell value. But i am not able to find how to do that. Most of my searches point to add rows and columns dynamically. Am i missing something very obvious?

Expected Output: Given below is how i would like it to be displayed to my end user :

Answer 1

Like i said i was always wondering whether we need to go for a data grid in cases where we have static data. So this is what i came up with. I create a stack panel and add y images. Now i add x such stack panels. If the exact location of the image comes up i add a highlighted image. worked perfectly. Sharing code for any one who wants to reuse it.

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);
        }

    }

Answer 2

you can try come thing like this

Xmal

  <Grid>
    <ItemsControl ItemsSource="{Binding A}" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" >
                    <Label Content="{Binding Heading}" BorderThickness="2, 0, 2, 2" BorderBrush="Black"/>
                    <ItemsControl ItemsSource="{Binding Values}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{Binding}" BorderThickness="0, 0, 2, 2" BorderBrush="Black"/>

                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

View Model

class ViewModel
{
    public List<Inventory> A
    {
        get;
        set;
    }

    public ViewModel()
    {
        A = new List<Inventory>();

        for (int i = 1; i <10; i++)
        {
            Inventory iv = new Inventory();
            iv.Heading = "R" + i ;
            iv.Values = new List<string>();
            for (int j = 0; j < 5; j++)
            {
                iv.Values.Add("Pic");
            }
            A.Add(iv);
        }
    }
}

public class Inventory
{
    public string Heading
    {
        get;
        set;
    }

    public List<string> Values
    {
        get;
        set;
    }
}