Create Hierarchical ContextMenu dynamically MVVM

Question

I would like to create dynamically Hierarchical ContextMenu from data in ViewModel.

In ViewMode, I defined ContextMenuAction:

public class ContextMenuAction : ViewModelBase
{
    public string Header { get; set; }
    public ICommand Action { get; set; }
    public Brush Icon { get; set; }
    public ObservableCollection<ContextMenuAction> SubActions { get; set; } = new ObservableCollection<ContextMenuAction>();
}

In View:

<ContextMenu ItemsSource="{Binding Path=PlacementTarget.Tag.Actions, RelativeSource={RelativeSource Self}}">
<ContextMenu.ItemTemplate >
    <DataTemplate DataType="MenuItem">
        <MenuItem/>
    </DataTemplate>
</ContextMenu.ItemTemplate>

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

This is result, there no text in context menu.

I already check output window to check binding, all bindings work, there is no exception.

Please help me to find out the reason, thank in advance!

Answer 1

You should define a HierarchicalDataTemplate :

<ContextMenu ItemsSource="{Binding Path=PlacementTarget.Tag.Actions, RelativeSource={RelativeSource Self}}">
    <ContextMenu.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:ContextMenuAction}" ItemsSource="{Binding SubActions}">
            <TextBlock Text="{Binding Header}" />
        </HierarchicalDataTemplate>
    </ContextMenu.ItemTemplate>
    <ContextMenu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="Command" Value="{Binding Action}"/>
        </Style>
    </ContextMenu.ItemContainerStyle>
</ContextMenu>