title: XAML Data Binding in a nested Grid
body: <p>I have created a nested grid in XAML, which currently looks like this:</p>
  
  <pre><code>&lt;Grid x:Name="mainGrid" &gt;        
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition/&gt;
          &lt;RowDefinition/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition/&gt;
          &lt;ColumnDefinition/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Grid Grid.Row="{Binding Row}" Grid.Column="{Binding Col}"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="0.1*"/&gt;
              &lt;RowDefinition/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.Row="0" FontWeight="Bold" TextDecorations="Underline"/&gt;
          &lt;ListView ItemsSource="{Binding Names}" Grid.Row="1"/&gt;
      &lt;/Grid&gt;
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p>My aim is to populate 4 <code>Grids</code> that follow the template of the inner <code>Grid</code>. I have attempted this by using the following code behind:</p>
  
  <pre><code>List&lt;Test&gt; tests = new List&lt;Test&gt;();
  
  for (int i = 0; i &lt; 2; i++)
  {
       for (int j = 0; j &lt; 2; j++)
       {
            Test t = new Test();
            t.Title = i + "\t" + j;
            t.Row = i;
            t.Col = j;
            tests.Add(t);
       }
  }
  
  mainGrid.DataContext = tests;
  </code></pre>
  
  <p>And the class definition:</p>
  
  <pre><code>class Test
  {
      public string Title { get; set; }
      public int Row { get; set; }
      public int Col { get; set; }
      public ObservableCollection&lt;string&gt; Names
      {
          get
          {
              return new ObservableCollection&lt;string&gt;() { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"};
          }   
      }
  }
  </code></pre>
  
  <p>My thoughts here were that I'd have 4 objects with Row/Col definitions for each segment of the outer <code>Grid</code> definition (0,0 &amp; 0,1 &amp; 1,0 &amp; 1,1). The inner <code>Grid</code> would serve as a template like an <code>ItemTemplate</code> in a <code>ListView</code>. However only the top (0,0) <code>Grid</code> is populated. </p>
  
  <p>What steps should I take so that the inner <code>Grid</code> behaves like a template and all 4 <code>Grids</code> are created and populated?</p>