title: MenuItem.Header and MenuItem.Icon DataTemplate
body: <p>I have a menu with the two following menu items:</p>
  
  <pre><code>&lt;MenuItem Header="Item1"&gt;
    &lt;MenuItem.Icon&gt;
      &lt;cc:Icon ImageSource="..." Size="22"/&gt;
    &lt;/MenuItem.Icon&gt;
  &lt;/MenuItem&gt;
  &lt;MenuItem Header="Item2"&gt;
    &lt;MenuItem.Icon&gt;
      &lt;cc:Icon ImageSource="..." Size="22"/&gt;
    &lt;/MenuItem.Icon&gt;
  &lt;/MenuItem&gt;
  </code></pre>
  
  <p>As you can see each Item has a name as the "Header" and an Icon (my own control) as an an "Icon".</p>
  
  <p>Instead of writing them explicitly in the XAML I want to Bind the <code>ItemsSource</code> to a <code>List&lt;MenuItem&gt;</code> object in my ViewModel, like this:</p>
  
  <pre><code>ItemsSource="{Binding Path=SomeMenu}"
  </code></pre>
  
  <p>My <code>MenuItem</code> class has the fields "String Name" and <code>ImageSource Icon</code> which I want to bind to the Header and the <code>Icon</code> parts of my menu item <em>exactly</em> how I did here. </p>
  
  <p>I thought the right way was to use a <code>DataTemplate</code>, like this:</p>
  
  <pre><code>&lt;Menu.ItemTemplate&gt;
    &lt;DataTemplate&gt;
      &lt;!-- TODO: Bind the Header and Icon properties--&gt;
      &lt;TextBlock Text="{Binding Path=Name}"/&gt;
      &lt;!-- how to bind the icon? --&gt;
    &lt;/DataTemplate&gt;
  &lt;Menu.ItemTemplate&gt;
  </code></pre>
  
  <p>But I don't understand how to define the Header and the <code>Icon</code> templates separately. </p>
  
  <p>How do I accomplish this, than? </p>
  
  <p><strong>update:</strong> I want the <code>&lt;cc:Icon&gt;</code> to appear whereever in the menuItem template there is a <code>&lt;contentPresenter Source="Icon"&gt;</code> and the <code>textBox</code> the appear whereever there is a <code>&lt;contentPresenter Source="Header"&gt;</code></p>