title: DataGrid work with WrapPanel as ItemsPanel
body: <p>How can i implement the a vertical <code>WrapPanel</code> as a <code>DataGrid</code>'s <code>ItemsPanel</code>?
  The <code>DataGrid</code> will, instead of expanding in height , break horizontally into another column (with header and all). 
  My Problem is similar to the <strong>Example 2</strong> on this thread <a href="https://wpf.codeplex.com/discussions/41452" rel="nofollow noreferrer">How to make DataGrid work with WrapPanel?</a></p>
  
  <p>As an example. If the all rows can't fit the height next rows start on the next column</p>
  
  <pre><code>|H1   | H2   |   |H1   |H2    | 
  --------------   --------------
  |A1   | B1   |   |A5   |B5    |
  --------------   --------------
  |A2   | B2   |   |A6   |B6    |
  --------------   --------------
  |A3   | B3   |   |A7   |B7    |
  --------------   --------------
  |A4   | B4   |   |      |     |
  --------------   --------------
  </code></pre>
  
  <p>If the height of the datagrid is increased then,</p>
  
  <pre><code>|H1   | H2   |   |H1   |H2    |
  --------------   --------------
  |A1   | B1   |   |A7   |B7    |
  --------------   --------------
  |A2   | B2   |   |     |      |
  --------------   --------------
  |A3   | B3   |   |     |      |
  --------------   --------------
  |A4   | B4   |   |     |      |
  --------------   --------------
  |A5   | B5   |   |     |      |
  --------------   --------------
  |A6   | B6   |   |     |      |
  --------------   --------------
  </code></pre>
  
  <p><strong>Currently</strong></p>
  
  <p>I have managed to get it to break into the next column</p>
  
  <pre><code>&lt;DataGrid ItemsSource="{Binding Path=Items}"&gt;
      &lt;DataGrid.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;WrapPanel MaxHeight="500" Orientation="Vertical" IsItemsHost="True"/&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/DataGrid.ItemsPanel&gt;
      &lt;DataGrid.Columns&gt;
          &lt;DataGridTextColumn Header="No." Binding="{Binding Item1}" /&gt;
          &lt;DataGridCheckBoxColumn Header="A" Binding="{Binding Item2}" /&gt;
          &lt;DataGridCheckBoxColumn Header="B" Binding="{Binding Item3}" /&gt;
          &lt;DataGridCheckBoxColumn Header="C" Binding="{Binding Item4}" /&gt;
          &lt;DataGridCheckBoxColumn Header="D" Binding="{Binding Item5}" /&gt;
          &lt;DataGridTextColumn Binding="{x:Null}" /&gt;
      &lt;/DataGrid.Columns&gt;
  &lt;/DataGrid&gt;
  </code></pre>
  
  <p>I have disabled the headers in the code as i can't get it repeat for the next columns and added an empty column as i can't get the margin when the rows begin again in next column.</p>
  
  <p>This works fine (except for the above reasons) when the grid doesn't need to scroll horizontally. But when the grid needs to scroll horizontally, every column starts scrolling and disappears to the left </p>
  
  <p><strong>When Not Scrolling</strong>
  <img src="https://i.stack.imgur.com/EBV9m.png" alt="Normally without scrolling"></p>
  
  <p><strong>When Scrolling</strong>
  <img src="https://i.stack.imgur.com/B7g3D.png" alt="enter image description here"></p>