title: WPF, MVVM, and Menu Foreground Color
body: <p>I'm new to both WPF and MVVM.  I have searched for a good way to dynamically create menus in the MVVM parttern and I am not finding anything to my liking, so I rolled my own solution.  It works, but for some reason the Foreground (text) color of the menus are sometimes (just sometimes) not correct.</p>
  
  <p>I added a link for the image below.</p>
  
  <p><strike><a href="http://img220.imageshack.us/img220/1912/badmenu.jpg" rel="nofollow noreferrer">http://img220.imageshack.us/img220/1912/badmenu.jpg</a></strike> (Dead Link)</p>
  
  <p>My lowest submenu displays correctly with a white foreground, but its parent menus forground turned to black and is almost impossible to read.  If I had hard coded the menus then the parent's forground color would be white.  If I move my mouse over the parent its text will switch back to white and the submenu will become black.  </p>
  
  <p>Further, once I move my mouse away from the parent, all of its boolean properties <code>IsHighlighted, IsSubmenuOpen, etc...</code> become false, which surprising to me because I would think they should stay true.  The end result is I haven't been able to solve this with a style trigger.</p>
  
  <p>Here is my XAML .</p>
  
  <pre><code>&lt;Window.Resources&gt;
    &lt;DataTemplate DataType="{x:Type src:ParentMenu}" &gt;
      &lt;Menu &gt;
        &lt;MenuItem Header="{Binding MenuName}" ItemsSource="{Binding ChildMenuItems}" /&gt;
      &lt;/Menu&gt;
    &lt;/DataTemplate&gt;
  
    &lt;HierarchicalDataTemplate DataType="{x:Type src:ChildMenu}" 
                            ItemsSource="{Binding ChildMenuItems}" &gt;
      &lt;MenuItem Header="{Binding MenuName}" Command="{Binding Path=Command}" /&gt;
    &lt;/HierarchicalDataTemplate&gt;
  </code></pre>
  
  <p>' StackOverflow is masking my end tag for Window.Resources</p>
  
  <pre><code>&lt;DockPanel&gt;
     &lt;Menu DockPanel.Dock="Top" ItemsSource="{Binding Menus}" /&gt;
  
    &lt;Grid&gt;
         &lt;!-- Add additional content here --&gt;
    &lt;/Grid&gt;
  &lt;/DockPanel&gt;
  </code></pre>
  
  <p>Both <code>ParentMenu</code> and <code>ChildMenu</code> inherit from a common class that actually holds all the menus and exposes the sub-menus through the <code>ChildMenuItems</code> collection. <code>ChildMenuItems</code> is a list of <code>ChildMenu</code> objects. My <code>ViewModels</code> expose a list of <code>ParentMenu</code> objects.</p>
  
  <p>There are probably better ways to accomplish what I want here. Here is an example:</p>
  
  <p><strike>img132.imageshack.us/img132/4160/bettermenu.jpg</strike> (Dead Link)</p>
  
  <p>Any suggestions on what I'm doing wrong and/or how to fix the display problem?</p>