如何在WPF中让模板化MenuItem的内容拉伸填充可用空间

问题根本原因 #

WPF 原生 MenuItem 的子项容器默认 HorizontalContentAlignment 取值为 Left，外层容器不会将全部可用宽度分配给内部承载的内容，因此即使 DataTemplate 内的控件设置了拉伸属性也无法生效。

解决方法 #

无需完全重写 MenuItem 基础模板，只要做两处简单修改即可：

1. 在你当前定义的 <MenuItem.Resources> 节点内新增针对子 MenuItem 的隐式样式，强制内容拉伸对齐
2. 给 VisualDiameter 对应 DataTemplate 内的 TextBlock 补充水平拉伸属性

修改后的核心代码如下：

<MenuItem
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    VerticalContentAlignment="Stretch"
    BorderBrush="Black"
    BorderThickness="1"
    ItemsSource="{Binding Path=CurrentlyAvailableSynergies, Source={StaticResource ResourceKey=VM}}">
    <!-- 原有Header、ToolTip代码保持不变 -->
    <MenuItem.Resources>
        <!-- 新增隐式样式，仅作用于当前MenuItem的所有子级容器 -->
        <Style TargetType="MenuItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <!-- 可选：去除默认内边距，让内容完全贴合容器边界 -->
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>
        </Style>

        <HierarchicalDataTemplate DataType="{x:Type ent:VisualSynergy}" ItemsSource="{Binding Path=AvailableDiameters}">
            <TextBlock Text="{Binding SynergyText}"/>
        </HierarchicalDataTemplate>

        <DataTemplate DataType="{x:Type ent:VisualDiameter}">
            <TextBlock
                HorizontalAlignment="Stretch" <!-- 新增水平拉伸属性 -->
                VerticalAlignment="Stretch"
                Background="Purple"
                Text="{Binding Path=VisualValue}">
                <!-- 原有交互触发代码保持不变 -->
                <intr:Interaction.Triggers>
                    <intr:EventTrigger EventName="PreviewMouseLeftButtonDown">
                        <intr:InvokeCommandAction Command="{Binding Path=SelectSynergyCommand}">
                            <intr:InvokeCommandAction.CommandParameter>
                                <MultiBinding Converter="{StaticResource ResourceKey=StdMultiConverter}">
                                    <Binding Path="." />
                                    <Binding Path="." Source="{StaticResource ResourceKey=VM}" />
                                </MultiBinding>
                            </intr:InvokeCommandAction.CommandParameter>
                        </intr:InvokeCommandAction>
                    </intr:EventTrigger>
                </intr:Interaction.Triggers>
            </TextBlock>
        </DataTemplate>
    </MenuItem.Resources>
</MenuItem>

补充说明 #

如果需要让弹出菜单的整体宽度和顶层 MenuItem 的 Header 宽度保持一致，可以额外在<MenuItem.Resources>节点内新增Popup样式绑定：

<Style TargetType="Popup">
    <Setter Property="Width" Value="{Binding PlacementTarget.ActualWidth, RelativeSource={RelativeSource Self}}"/>
</Style>

设置后子菜单宽度会和顶层按钮宽度完全一致，内部 TextBlock 就能完全铺满整个横向空间。

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