How can I bind an ObservableCollection of ViewModels to a MenuItem?

Question

When I bind Menu Items with an ObservableCollection, only the \"inner\" area of the MenuItem is clickable:

alt text http://tanguay.info/web/external/mvvmMenuItems.pn

Answer 1

Here is how I have done my menus. It may not be precisely what you need, but I think it is pretty close.

TopMenuViewModel is a collection of the menus that will appear on the menu bar. They each contain the MenuName that will be displayed and a collection called SubMenuItems that I set to be the ItemsSource.

I control the way the SubMenuItems are displayed by way of the style SumMenuItemStyle. Each SubMenuItem has its own MenuName property, Command property of type ICommand, and possibly another collection of SubMenuItems.

The result is that I am able to store all my menu information in a database and dynamically switch what menus are displayed at runtime. The entire menuitem area is clickable and displays correctly.

Hope this helps.