WPF ContextMenu using ItemsControl, incorrectly highlight the whole collection

Question

I need to design one ContextMenu which includes one MenuItem, this MenuItem has a deeper level menu list which binds to a property of type ObservableCollection from my ViewModel. The code looks like this:

<ContextMenu DataContext="{Binding PlacementTarget.DataContext, 
   RelativeSource={RelativeSource Self}}" >            
   ...                                                                                                                                                     
   <MenuItem Header="Map to account" >
       <ItemsControl ItemsSource="{Binding RelatedAccounts}" >                                        
           <ItemsControl.ItemTemplate>
               <DataTemplate>
                   <MenuItem Header="{Binding Number}" 
                        Command="{Binding PlacementTarget.DataContext.MapToAccountCommand, 
                        RelativeSource={RelativeSource AncestorType=ContextMenu}}"
                        CommandParameter="{Binding}"
                   />                 
               </DataTemplate>
           </ItemsControl.ItemTemplate>                                        
       </ItemsControl>
   </MenuItem>
...
</ContextMenu>

The idea is when the user right-clicks one payment item from the UI, and goes to "Map to account" menu item, a deeper level of menu items will show up and list all the related account for the user to select(as you can see the ItemsControl binds to RelatedAccounts)

Everything works fine, the context menu correctly shows all the related accounts I expose from ViewModel, and when the user right clicks on one account, the Command property MapToAccountCommand from the ViewModel gets executed with the passed parameter of selected account.

But there is one behavior that I don't want: when the mouse goes into one level deeper than the menu "Map to account", it actually highlights the whole collection of menu items. Please see the pictures below:

Above is the case when I put my mouse over "USD Account 1"

And even if the mouse is not over any specific account, but in some other area within the deeper level menu, the highlight effect is still there, see the picture:

This obviously doesn't feel about right. Can anyone tell me what I did wrong? Thanks!

Answer 1

MemnuItem is already ItemsControl therefore has its own ItemsSource property which you can bind to. Try something like this:

<MenuItem Header="Map to account" ItemsSource="{Binding RelatedAccounts}" >                                        
     <MenuItem.ItemTemplate>
         <DataTemplate>
             <TextBlock Text="{Binding Number}"/>
         </DataTemplate>
     </MenuItem.ItemTemplate>                                        
     <MenuItem.ItemContainerStyle>
         <Style TargetType="{x:Type MenuItem}">
             <Setter Property="Command" Value="{Binding PlacementTarget.DataContext.MapToAccountCommand, 
                  RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
             <Setter Property="CommandParameter" Value="{Binding}"/>
         </Style>
     </MenuItem.ItemContainerStyle>
</MenuItem>

In your case you put ItemsControl as MenuItem item therefore WPF will wrap it in MenuItem and your whole ItemsControl becomes one big MenuItem with other MenuItems in the list