Databases
StackOverflow2013
Postsdbo
POHow can I bind an ObservableCollection of ViewModels to a MenuItem?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I bind an ObservableCollection of ViewModels to a MenuItem?
    text
    copied!<p>When I bind Menu Items with an ObservableCollection, only the "inner" area of the MenuItem is clickable:</p> <p><a href="http://tanguay.info/web/external/mvvmMenuItems.png">alt text http://tanguay.info/web/external/mvvmMenuItems.png</a></p> <p>In my <strong>View</strong> I have this menu:</p> <pre><code>&lt;Menu&gt; &lt;MenuItem Header="Options" ItemsSource="{Binding ManageMenuPageItemViewModels}" ItemTemplate="{StaticResource MainMenuTemplate}"/&gt; &lt;/Menu&gt; </code></pre> <p>Then I bind it with this <strong>DataTemplate</strong>:</p> <pre><code>&lt;DataTemplate x:Key="MainMenuTemplate"&gt; &lt;MenuItem Header="{Binding Title}" Command="{Binding DataContext.SwitchPageCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}" Background="Red" CommandParameter="{Binding IdCode}"/&gt; &lt;/DataTemplate&gt; </code></pre> <p>Since each ViewModel in the ObservableCollection <strong>ManageMenuPageItemViewModels</strong> has a property <strong>Title</strong> and <strong>IdCode</strong>, the above code works fine at first sight.</p> <p><strong>HOWEVER</strong>, the problem is that the <strong>MenuItem</strong> in the DataTemplate is actually <strong><em>inside</em></strong> another MenuItem (<strong>as if it is being bound twice</strong>) so that in the above DataTemplate with <strong>Background="Red"</strong> there is a <strong><em>Red box inside each menu item</em></strong> and only this area can be clicked, not the whole menu item area itself (e.g. if the user clicks on the area where the checkmark is or to the right or left of the inner clickable area, then nothing happens, which, if you don't have a separate color is very confusing.) </p> <p><strong>What is the correct way to bind MenuItems to an ObservableCollection of ViewModels so that the whole area inside each MenuItem is clickable?</strong></p> <h1>UPDATE:</h1> <p>So I made the following changes based on advice below and now have this:</p> <p><a href="http://tanguay.info/web/external/mvvmMenuItemsYellow.png">alt text http://tanguay.info/web/external/mvvmMenuItemsYellow.png</a></p> <p>I have only a TextBlock inside my DataTemplate, but I still can't "color the whole MenuItem" but just the TextBlock:</p> <pre><code>&lt;DataTemplate x:Key="MainMenuTemplate"&gt; &lt;TextBlock Text="{Binding Title}"/&gt; &lt;/DataTemplate&gt; </code></pre> <p>And I put the Command binding into Menu.ItemContainerStyle but they don't fire now:</p> <pre><code>&lt;Menu DockPanel.Dock="Top"&gt; &lt;Menu.ItemContainerStyle&gt; &lt;Style TargetType="MenuItem"&gt; &lt;Setter Property="Background" Value="Yellow"/&gt; &lt;Setter Property="Command" Value="{Binding DataContext.SwitchPageCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Menu}}}"/&gt; &lt;Setter Property="CommandParameter" Value="{Binding IdCode}"/&gt; &lt;/Style&gt; &lt;/Menu.ItemContainerStyle&gt; &lt;MenuItem Header="MVVM" ItemsSource="{Binding MvvmMenuPageItemViewModels}" ItemTemplate="{StaticResource MainMenuTemplate}"/&gt; &lt;MenuItem Header="Application" ItemsSource="{Binding ApplicationMenuPageItemViewModels}" ItemTemplate="{StaticResource MainMenuTemplate}"/&gt; &lt;MenuItem Header="Manage" ItemsSource="{Binding ManageMenuPageItemViewModels}" ItemTemplate="{StaticResource MainMenuTemplate}"/&gt; &lt;/Menu&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload