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

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

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

You can use a standard DataGrid to do that. You can find out how to use one on the DataGrid Class page on MSDN. Normally when using these controls, you would Bind a collection of a custom data type class instances to the DataGrid.ItemsSource property and the DataGrid would add a row for every item in the collection and a column for every property in the data type class.

As you want to have a variable number of columns, that would cause you a problem. However, there are something in .NET called Anonymous Types that you can use. This basically enables you to define an anonymous class at run time, so that you can define as many properties as you need columns. You can find out how to use them in the Anonymous Types (C# Programming Guide) page on MSDN.

My last hint for you is that you'd want to have string properties in your anonymous classes that provide the relevant image paths to use to display whatever image you want in each column. Then, you can declare a DataTemplate to define what each cell should look like (an Image)... for this to work, your string file paths will need to be in the following format -/YourAppName;component/YourImageFolderName/YourImageName.jpg:

<DataGrid ItemsSource="{Binding YourAnonymousTypedCollection}">    <DataGrid.ItemTemplate>        <DataTemplate>            <Image Source="{Binding}" />        </DataTemplate>    </DataGrid.ItemTemplate></DataGrid>

You can find out more from the ItemsControl.ItemTemplate Property and Data Templating Overview pages on MSDN.

Just in case that wasn't clear to anyone, I also added the link to the Anonymous Types (C# Programming Guide) page on MSDN, so that anyone that didn't understand could find out the whole story. Therefore, your first comment was unnecessary and helped nobody.

Moving on to your remarkable second comment where you flat out tell me that I will not be able to solve the "dynamic columns" problem using an anonymous class... this time you are just plain incorrect. You really should check these things before you make such claims. To prove that my method works, I knocked up a quick and easy example:

Here is a DataGrid:

<DataGrid Name="DataGrid" AutoGenerateColumns="True" />

Here's where I define my anonymous type, put them in a List and Bind them to the DataGrid:

var item = new { Id = 1, Name = "Bob", Age = 30 };var item2 = new { Id = 2, Name = "Jane", Age = 26 };var item3 = new { Id = 3, Name = "Dave", Age = 42 };var items = new[] { item, item2, item3 }.ToList();DataGrid.ItemsSource = items;

You can then see that it works perfectly well. Extending this example by creating a type with a different number of parameters shows that it would work with any number of columns:

var item = new { Id = 1, Name = "Bob", Age = 30, Date = DateTime.Now };var item2 = new { Id = 2, Name = "Jane", Age = 26, Date = DateTime.Now };var item3 = new { Id = 3, Name = "Dave", Age = 42, Date = DateTime.Now };var items = new[] { item, item2, item3 }.ToList();DataGrid.ItemsSource = items;

Of course the question author could declare the items in a loop to make it more efficient.