Horizontal stretch WPF ContextMenu MenuItem in HierarchicalDataTemplate.ItemTemplate

Question

I have a WPF system traybar application. When right clicking traybar icon there is a ContextMenu using a HierarchicalDataTemplate to get a 2 level dynamically populated menu. It works but the "clickable" part of the items on the 2nd level does not properly stretch to the available width of the parent control. Instead See picture:

Now the user has to click the darker section (where the text is) of the MenuItem to perform the Command of this item. I want the whole of the menu row to be able to to trigger the Command.

Here is my XAML:

<CollectionViewSource x:Key="Items" Source="{Binding Path=Items}" />
<ContextMenu x:Shared="false" x:Key="Menu" HorizontalContentAlignment="Stretch">
    <ContextMenu.ItemTemplate>
        <HierarchicalDataTemplate DataType="SystemTrayItemsViewModel" ItemsSource="{Binding Items}">
            <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Converter={StaticResource TabIconConverter}}" />
            <TextBlock Text="{Binding Name}" />
            </StackPanel>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <MenuItem Header="{Binding Text}" ToolTip="{Binding ToolTip}" Command="{Binding ToClipBoardCommand}" HorizontalContentAlignment="Stretch" />
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </ContextMenu.ItemTemplate>
    <ContextMenu.ItemsSource>
        <CompositeCollection>
            <CollectionContainer Collection="{Binding Source={StaticResource Items}}">
            </CollectionContainer>
            <Separator />
            <MenuItem Header="Exit" cal:Message.Attach="ExitApplication" />
        </CompositeCollection>
    </ContextMenu.ItemsSource>
</ContextMenu>

For full source code, check https://github.com/kasperhlund/textgrunt

Were you able to find a solution to this problem? I'm having this problem as well but not with the HierarchicalDataTemplate. The problem has something to do with using the CompositeCollection to bind a VM's collection as well as have xaml defined MenuItems. — Thick_propheT, Jul 06 '20 at 19:27

Thick_propheT · Answer 1 · 2020-07-07T20:39:53.570

I just found the answer to this in another SO question.

It seems that the problem is specifying MenuItem within the ItemTemplate. The ContextMenu is apparently wrapping another MenuItem around the ItemTemplate, causing this nesting effect. Istead, you have to do this via the MenuItem's Style:

<ContextMenu>
   <ContextMenu.Resources>
      <Style TargetType="{x:Type MenuItem}">
         <Setter Property="Header" Value="{Binding Text}"/>
         <Setter Property="ToolTip" Value="{Binding ToolTip}"/>
         <Setter Property="Command" Value="{Binding ToClipBoardCommand}"/>
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      </Style>
   </ContextMenu.Resources>
</ContextMenu>

Horizontal stretch WPF ContextMenu MenuItem in HierarchicalDataTemplate.ItemTemplate

1 Answers1