WPF Submenu for context menu

Question

If the Context menu is "hardcoded" in xaml, then it is easy to add submenus. For example:

<ContextMenu>
    <MenuItem Header="Comm1" Command="{Binding Blabla1}">
        <MenuItem Header="SubComm1" Command="{Binding Blabla2}"></MenuItem>
    </MenuItem>
    <MenuItem Command="Comm2"></MenuItem>
    <MenuItem Command="Comm3"></MenuItem>
</ContextMenu>

This means, that the ContextMenu has three elements (Comm1, Comm2 and Comm3) and Comm1 has submenu SubComm1.

I have made my ContextMenu a bit more flexible:

<ContextMenu ItemsSource="{Binding ContextMenuItemsSource}">
    <ContextMenu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding ContextMenuCommandHeader}"></Setter>
            <Setter Property="Command" Value="{Binding ContextMenuCommand}"></Setter>
        </Style>
     </ContextMenu.ItemContainerStyle>
</ContextMenu>

Basically I can have any number of elements in ContextMenu, and any element can have any Command. How can I add submenu to ContextMenu element?

Answer 1

Specifying explicitly, without binding a collection you can add sub menus by nesting them.

A MenuItem can have other MenuItem elements within it as child/sub menus and can go up to several levels. The following code adds three children menu items to first menu item.

<MenuItem Header="_File">  
   <MenuItem Header="_Open" IsCheckable="true" />  
      <MenuItem Header="_Close" IsCheckable="true" />  
   <MenuItem Header="_Save" IsCheckable="true" />  
</MenuItem>  

Source: https://www.c-sharpcorner.com/uploadfile/mahesh/menus-in-wpf/

Answer 2

You can set MenuItem.ItemsSource to the nested collection. This will generate the submenu for any menuitem. For this the model backing your MenuItem should have submenuitems collection in it

<ContextMenu ItemsSource="{Binding ContextMenuItemsSource}">
    <ContextMenu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="ItemsSource" Value="{Binding ContextMenuSubItems}"></Setter>
            <Setter Property="Header" Value="{Binding ContextMenuCommandHeader}"></Setter>
            <Setter Property="Command" Value="{Binding ContextMenuCommand}"></Setter>
        </Style>
     </ContextMenu.ItemContainerStyle>
</ContextMenu>

Similarly you can set the MenuItem.ItemContainerStyle and MenuItem.ItemTemplate to style your submenuitems.