WPF托盘应用中HierarchicalDataTemplate二级MenuItem点击区域无法拉伸问题

Hey there, I’ve dealt with this exact headache before when working with WPF’s HierarchicalDataTemplate for context menus—nothing’s more annoying than users complaining they can only click the tiny text area of submenu items instead of the whole row! Let’s break down the fix:

The Root Cause #

The default MenuItem control template for submenu items doesn’t stretch the clickable hit-test area to fill the entire available width. It uses auto-sizing for the content container, so only the text (or whatever your header content is) responds to clicks.

Step 1: Create a Stretchable MenuItem Style #

First, we’ll override the default template to force the clickable area to span the full width. Add this to your app’s resources (either in App.xaml or your window/user control’s resources section):

<Style x:Key="FullWidthSubMenuItemStyle" TargetType="{x:Type MenuItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <!-- This Border is the clickable area—we'll make it stretch -->
                <Border x:Name="MenuBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/> <!-- For icon (if used) -->
                            <ColumnDefinition Width="*"/>    <!-- This forces content to fill remaining space -->
                            <ColumnDefinition Width="Auto"/> <!-- For submenu arrow -->
                        </Grid.ColumnDefinitions>

                        <!-- Icon container (optional, remove if you don't use menu icons) -->
                        <ContentPresenter x:Name="IconPresenter"
                                          Content="{TemplateBinding Icon}"
                                          Margin="4,0,6,0"
                                          VerticalAlignment="Center"/>

                        <!-- Main menu content (your text or custom header) -->
                        <ContentPresenter Grid.Column="1"
                                          x:Name="HeaderContent"
                                          Content="{TemplateBinding Header}"
                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                          VerticalAlignment="Center"
                                          HorizontalAlignment="Left"/>

                        <!-- Submenu arrow (only visible if there are child items) -->
                        <Path x:Name="SubmenuArrow"
                              Grid.Column="2"
                              Data="M0,0 L0,8 L4,4 z"
                              Fill="{TemplateBinding Foreground}"
                              Margin="4,0,6,0"
                              VerticalAlignment="Center"
                              Visibility="Collapsed"/>
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <!-- Show arrow when menu has subitems -->
                    <Trigger Property="HasItems" Value="True">
                        <Setter TargetName="SubmenuArrow" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <!-- Hover state styling -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="MenuBorder" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter TargetName="MenuBorder" Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>
                    <!-- Pressed state styling -->
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="MenuBorder" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Step 2: Apply the Style to Your HierarchicalDataTemplate #

Now, tell your HierarchicalDataTemplate to use this style for all child (secondary) menu items. Update your template like this:

<HierarchicalDataTemplate x:Key="TrayMenuTemplate" ItemsSource="{Binding SubMenuItems}">
    <!-- Your primary menu item content -->
    <TextBlock Text="{Binding DisplayName}"/>
    
    <!-- Apply our full-width style to secondary menu items -->
    <HierarchicalDataTemplate.ItemContainerStyle>
        <StaticResource ResourceKey="FullWidthSubMenuItemStyle"/>
    </HierarchicalDataTemplate.ItemContainerStyle>
</HierarchicalDataTemplate>

Step 3: Hook It Up to Your Tray Context Menu #

Finally, make sure your context menu uses this template for its items:

<ContextMenu x:Key="SystemTrayContextMenu" 
             ItemsSource="{Binding MenuItems}" 
             ItemTemplate="{StaticResource TrayMenuTemplate}"/>

Quick Check #

Double-check that your menu item view models have the Command property bound directly to the MenuItem (via the template or your data binding). If you only attached the command to the inner TextBlock, that’s another reason clicks might be restricted—binding it to the MenuItem ensures the entire stretched area triggers the command.

That should do it! Your secondary menu items will now respond to clicks anywhere along their full width, just like the primary menu items.

内容的提问来源于stack exchange，提问作者Kflexior