title: WPF nested datagrid for custom data structure
body: <p>I have a custom data structure and I need a WPF component which will represent my data structure. Component should look like on a picture. Component should be dynamic, so number of ColumnSets in structure can be from 1 to x. And each columnSet can have different count of Columns. </p>
  
  <pre><code>public class CustomStructure{
     public List&lt;ColumnSet&gt; ColumnSets{get; set;}
  }   
  
  public class ColumnSet{
      public string Name { get; set; }
      public List&lt;Column&gt; ColumnSets{get;}
  }
  
  public class Column{
       public string Name { get; set; }
       public List&lt;int&gt; Data{get;}
  }
  </code></pre>
  
  <p>First row represent Name property from class ColumnSet. Second row is a Name property from class Column. Other rows are Data from Column class.</p>
  
  <p><a href="https://i.stack.imgur.com/CyxJJ.png" rel="nofollow noreferrer">Wanted WPF component design (image)</a>
  <br/>
  <strong>My Solution</strong>
  <br/></p>
  
  <p>I defined two components. First represent outer table, and it is called FuzzyTableControl. It has X columns and only ONE row.
  Second represent FuzzyInnerTableControl for each column in first row of FuzzyTableControl. </p>
  
  <p>FuzzyTableControl.xaml</p>
  
  <pre><code> &lt;UserControl:Class="FuzzyTableControl"&gt;       
     &lt;UserControl.DataContext&gt;
         &lt;viewModel:FuzzyTableViewModel/&gt;
     &lt;/UserControl.DataContext&gt;
  
  &lt;DataGrid AutoGenerateColumns="True" IsReadOnly="True"
          CanUserAddRows="False"
          CanUserDeleteRows="False"
          ItemsSource="{Binding DataTable}"&gt;
  // here is problem 1
      &lt;DataGrid.Columns&gt;
        &lt;DataGridTemplateColumn Header="{Binding}"&gt;
          &lt;DataGridTemplateColumn.CellTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;view:FuzzyInnerTableControl/&gt;
              &lt;/DataTemplate&gt;
          &lt;/DataGridTemplateColumn.CellTemplate&gt;
      &lt;/DataGridTemplateColumn&gt;
  &lt;/DataGrid.Columns&gt;
  &lt;/DataGrid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>FuzzyTableViewModel.cs </p>
  
  <pre><code>public class FuzzyTableViewModel : BaseViewModel
      {
          public FuzzyTable Table { get; set; }
  
          public DataTable DataTable { get; set; }
  
  
          public FuzzyTableViewModel()
          {
              Table = FuzzyTable.Generate(3, 2);
              DataTable = new DataTable();
  
              foreach (var attribute in Table.Attributes)
              {
                  DataTable.Columns.Add(new DataColumn(attribute.Name));
              }
              var row = new List&lt;object&gt;();
              foreach (var attribute in Table.Attributes)
                  row.Add(attribute);
  
              DataTable.Rows.Add(row.ToArray());
          }
      }
  </code></pre>
  
  <p>FuzzyInnerTableControl.xaml
  this one works good</p>
  
  <pre><code> &lt;UserControl:Class="FuzzyInnerTableControl"&gt;
      &lt;UserControl.DataContext&gt;
          &lt;viewModel:FuzzyInnerTableViewModel/&gt;
      &lt;/UserControl.DataContext&gt;    
      &lt;DataGrid ItemsSource="{Binding DataTable}"/&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>FuzzyInnerTableViewModel.cs</p>
  
  <pre><code>public class FuzzyInnerTableViewModel : BaseViewModel
      {
          public DataTable DataTable { get; }
  
          public ColumnSetDouble ColumnSetDouble { get; set; }
  
          public FuzzyInnerTableViewModel()
          {
              // test
              var table = FuzzyTable.Generate(3, 2);
              ColumnSetDouble = table.ClassAttribute;
              //end test
  
              DataTable = new DataTable();
  
              foreach (var attribute in ColumnSetDouble.Columns)
                  DataTable.Columns.Add(new DataColumn(attribute.Name));
  
              for (int rowId = 0; rowId &lt; ColumnSetDouble.Columns[0].Data.Count; rowId++)
              {
                  var row = new List&lt;object&gt;();
                  foreach (var column in ColumnSetDouble.Columns)
                  {
                      row.Add(column.Data[rowId]);
                  }
  
                  DataTable.Rows.Add(row.ToArray());
              }
  
          }
  
      }
  </code></pre>
  
  <p>I don't know how to define cell template for each column of FuzzyTableControl. This solution creates NEW column, but I need load columns dynamically from viewModel. </p>