title: Datagrid: generate columns from a property of the ItemsSource collection
body: <p>I'm trying to create a datagrid with auto generating columns.
  Let's say my Collection is a property named <code>Articles</code> of my viewmodel of type <code>ObservableCollection&lt;ArticleWrapper&gt;</code>.</p>
  
  <p>I bind now the ItemsSource to this collection:</p>
  
  <pre><code>&lt;wpf:DataGrid ItemsSource={Binding Articles} /&gt;
  </code></pre>
  
  <p>The class <code>ArticleWrapper</code> is like this:</p>
  
  <pre><code>[c#]
  public class ArticleWrapper
  {
      public ArticleConfigurationSet ArticleConfigurationSet { get; set; }
      public string Description { get; set; }
  }
  
  
  [vb.net]
  Public Class ArticleWrapper
      Public Property ArticleConfigurationSet As ArticleConfigurationSet
      Public Property Description As String
  End Class
  </code></pre>
  
  <p>The class <code>ArticleConfigurationSet</code> is like this:</p>
  
  <pre><code>[c#]
  public class ArticleConfigurationSet
  {
      public string Key { get; set; }
      public int Number { get; set; }
  }
  
  [vb.net]
  Public Class ArticleConfigurationSet
      Public Property Key As String
      Public Property Number As Integer
  End Class
  </code></pre>
  
  <p>The autogenerated columns look like this (please forget about the CustomEntries):
  <img src="https://i.stack.imgur.com/fGoKo.png" alt="enter image description here"></p>
  
  <p>But now my problem: I want to bind the displayed data to my <code>ArticleConfigurationSet</code> property. But I cannot change my ItemsSource Binding, because the SelectedItem property of the datagrid must be of <code>ArticleWrapper</code> (for command handling).</p>
  
  <p>The datagrid should also look like this:
  <img src="https://i.stack.imgur.com/9oJ86.png" alt="enter image description here"></p>
  
  <p>Do you have any ideas how to do this?</p>