Populate ContextMenu from collection

[wgraaf]

I have a context menu on a DataGridColumnHeader:

              <Style Selector="DataGridColumnHeader">
                <Setter Property="ContextMenu">
                  <ContextMenu>
                    <MenuItem Header="View" ItemsSource="{Binding ColumnVisibilities}">
                      <MenuItem.Styles>
                        <Style Selector="MenuItem">
                          <Setter Property="Header" Value="{Binding Header}"/>
                          <Setter Property="Command" Value="{Binding ToggleColumnCommand}"/>
                          <Setter Property="StaysOpenOnClick" Value="True"/>
                          <Setter Property="Icon">
                            <Template>
                              <Image Source="/Assets/checkMark.bmp" IsVisible="{Binding IsVisible}"/>
                            </Template>
                          </Setter>
                        </Style>
                      </MenuItem.Styles>
                    </MenuItem>
                  </ContextMenu>
                </Setter>
              </Style>

This works, but I want to populate from ColumnVisibilities without the "View" menu item, i.e. have the ColumnVisibilities menu items show up in the root of the context menu.

I tried:

              <Style Selector="DataGridColumnHeader">
                <Setter Property="ContextMenu">
                  <ContextMenu ItemsSource="{Binding ColumnVisibilities}">
                    <ItemsControl.ItemTemplate>
                      <DataTemplate>
                        <MenuItem Header="{Binding Header}" Command="{Binding ToggleColumnCommand}" StaysOpenOnClick="True">
                          <MenuItem.Icon>
                            <Image Source="/Assets/checkMark.bmp" IsVisible="True"/>
                          </MenuItem.Icon>
                        </MenuItem>
                      </DataTemplate>
                    </ItemsControl.ItemTemplate>
                  </ContextMenu>
                </Setter>
              </Style>

which populates the context menu with the items, but with an extra margin at the left and disabled.
How can I get the menu items to show up in the context menu root like they show up in the sub-menu of the "View" menu item?

[jp2masa]

Did you try using ItemContainerTheme? Something like #10326 (comment).

[wgraaf]

Thanks for the reply.
In that example, what is the namespace aliases x: and l: (x:DataType="l:Column") supposed to be?

[jp2masa]

x: is the xaml namespace, it should come by default in the templates:

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

l: is the namespace that contains the (view)model class that represents your items, I'm not sure if it's still needed, as it may be inferred now.

[wgraaf]

I tried this:

              <Style Selector="DataGridColumnHeader">
                <Setter Property="ContextMenu">
                  <ContextMenu>
                    <Menu.ItemContainerTheme>
                      <ControlTheme TargetType="MenuItem" BasedOn="{StaticResource {x:Type MenuItem}}">
                        <Setter Property="Header" Value="{Binding Header}"/>
                        <Setter Property="Command" Value="{Binding ToggleColumnCommand}"/>
                        <Setter Property="ItemsSource" Value="{Binding ColumnVisibilities}"/>
                      </ControlTheme>
                    </Menu.ItemContainerTheme>
                  </ContextMenu>
                </Setter>
              </Style>

Unfortunately, I'm getting a null reference exception pointing to whichever Setter Value is last....

[jp2masa]

Try replacing Menu.ItemContainerTheme with ContextMenu.ItemContainerTheme.

[wgraaf]

If I do that the context menu does not show at all...

[workgroupengineering]

At first glance I notice two problems:

• Generally ContextMenu does not inherit the DataContext
• it is appropriate to use ItemContainerTheme as @jp2massa suggests

Furthermore, it would be advisable to use Flyout because ContextMenu will probably be deprecated in the future.

To solve the problem you should do something like this pseudo xaml:

<Window ...
       xmlns:vm="using:MyApp.ViewModel"
       x:DataType="vm:MainViewModel"
       Name="root">
  <Window.Recources>  
       <ControlTheme x:Key="ViewsTheme" 
                               TargetType="MenuItem" 
                               BasedOn="{StaticResource {x:Type MenuItem}}"
                               x:DataType="vm:ColumnViewModel">
                        <Setter Property="Header" Value="{Binding Header}"/>
                        <Setter Property="Command" Value="{Binding ToggleColumnCommand}"/>
        </ControlTheme>
  <Window.Recources>  
  <Window.Styles>
       <Style Selector="DataGridColumnHeader">
            <Setter Property="Flyout">
               <MenuFlyout>
                  <MenuItem Header="View" ItemsSource="{Binding  #root.((vm:MainViewModel)DataContext).ColumnVisibilities}"
                                        Theme={StaticResource ViewsTheme}/>
               </MenuFlyout>
            </Setter>
       </Style>
  </Window.Styles>  
  <Window.DataContext>
    <vm:MainViewModel/>
  </Window.DataContext>

   ...
   <DataGrid ItemsSource="{Biding Rows}">
       ...
   </DataGrid>
</Window/>

[wgraaf]

DataGridColumnHeader does not have a Flyout property...

Also, the point is to have collection-based menu items in the root of the contextmenu/flyout; not hosted in a parent menu item.
The latter option is already working, I just cannot make it work without a parent menu item.