How to populate a WPF grid based on a 2-dimensional array

Question

I have a 2-dimensional array of objects and I basically want to databind each one to a cell in a WPF grid. Currently I have this working but I am doing most of it procedurally. I create the correct number of row and column definitions, then I loop through the cells and create the controls and set up the correct bindings for each one.

At a minimum I would like to be able to use a template to specify the controls and bindings in xaml. Ideally I would like to get rid of the procedural code and just do it all with databinding, but I'm not sure that's possible.

Here is the code I am currently using:

public void BindGrid() {     m_Grid.Children.Clear();     m_Grid.ColumnDefinitions.Clear();     m_Grid.RowDefinitions.Clear();      for (int x = 0; x < MefGrid.Width; x++)     {         m_Grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star), });     }      for (int y = 0; y < MefGrid.Height; y++)     {         m_Grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star), });     }      for (int x = 0; x < MefGrid.Width; x++)     {         for (int y = 0; y < MefGrid.Height; y++)         {             Cell cell = (Cell)MefGrid[x, y];                                  SolidColorBrush brush = new SolidColorBrush();              var binding = new Binding("On");             binding.Converter = new BoolColorConverter();             binding.Mode = BindingMode.OneWay;              BindingOperations.SetBinding(brush, SolidColorBrush.ColorProperty, binding);              var rect = new Rectangle();             rect.DataContext = cell;             rect.Fill = brush;             rect.SetValue(Grid.RowProperty, y);             rect.SetValue(Grid.ColumnProperty, x);             m_Grid.Children.Add(rect);         }     }  } 

Answer 1

The purpose of the Grid is not for real databinding, it is just a panel. I am listing down the easiest way to accomplish the visualization of a two dimensional list

<Window.Resources>     <DataTemplate x:Key="DataTemplate_Level2">             <Button Content="{Binding}" Height="40" Width="50" Margin="4,4,4,4"/>     </DataTemplate>      <DataTemplate x:Key="DataTemplate_Level1">         <ItemsControl ItemsSource="{Binding}" ItemTemplate="{DynamicResource DataTemplate_Level2}">             <ItemsControl.ItemsPanel>                 <ItemsPanelTemplate>                     <StackPanel Orientation="Horizontal"/>                 </ItemsPanelTemplate>             </ItemsControl.ItemsPanel>         </ItemsControl>     </DataTemplate>  </Window.Resources> <Grid>     <ItemsControl x:Name="lst" ItemTemplate="{DynamicResource DataTemplate_Level1}"/> </Grid> 

And in the code behind set the ItemsSource of lst with a TwoDimentional data structure.

  public Window1()     {         List<List<int>> lsts = new List<List<int>>();          for (int i = 0; i < 5; i++)         {             lsts.Add(new List<int>());              for (int j = 0; j < 5; j++)             {                 lsts[i].Add(i * 10 + j);             }         }          InitializeComponent();          lst.ItemsSource = lsts;     } 

This gives you the following screen as output. You can edit the DataTemplate_Level2 to add more specific data of your object.