WPF如何实现带插入按钮的水平动态ListBox 鼠标移至项间显示按钮

宽度异常的根因 #

你当前修改Margin触发了父级Grid的布局重排，子元素超出父容器的Margin会被计入父级的自适应尺寸，所以Grid宽度被撑开。要实现悬浮覆盖效果且不影响原有布局，应该用不触发布局重算的方案替代修改Margin。

具体实现步骤 #

1. 重写ListBoxItem控件模板 #

把命中检测区、插入按钮都写到Item模板里，用负Margin+RenderTransform实现跨Item覆盖，全程不会修改父容器尺寸：

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="Padding" Value="8,4"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="Transparent">
                        <!-- 原有内容展示 -->
                        <ContentPresenter />
                        <!-- 左侧间隙命中区：覆盖当前Item和上一个Item的间隙 -->
                        <Border x:Name="LeftGapHitZone" Width="6" HorizontalAlignment="Left"
                                Background="Transparent" Margin="-3,0,0,0" />
                        <!-- 右侧间隙命中区：覆盖当前Item和下一个Item的间隙 -->
                        <Border x:Name="RightGapHitZone" Width="6" HorizontalAlignment="Right"
                                Background="Transparent" Margin="0,0,-3,0" />
                        <!-- 插入按钮，默认隐藏 -->
                        <Button x:Name="InsertBtn" Content="+" Width="24" Height="24" 
                                Visibility="Collapsed" Panel.ZIndex="999"
                                RenderTransformOrigin="0.5,0.5">
                            <Button.RenderTransform>
                                <TranslateTransform X="-12"/>
                            </Button.RenderTransform>
                        </Button>
                    </Grid>
                    <!-- 触发器纯XAML实现交互，不需要后台MouseEnter代码 -->
                    <ControlTemplate.Triggers>
                        <!-- 鼠标悬浮Item时显示命中区 -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="LeftGapHitZone" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="RightGapHitZone" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <!-- 鼠标停在左侧间隙，显示左侧插入按钮 -->
                        <Trigger SourceName="LeftGapHitZone" Property="IsMouseOver" Value="True">
                            <Setter TargetName="InsertBtn" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="InsertBtn" Property="HorizontalAlignment" Value="Left"/>
                        </Trigger>
                        <!-- 鼠标停在右侧间隙，显示右侧插入按钮 -->
                        <Trigger SourceName="RightGapHitZone" Property="IsMouseOver" Value="True">
                            <Setter TargetName="InsertBtn" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="InsertBtn" Property="HorizontalAlignment" Value="Right"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

2. 去掉原有后台MouseEnter逻辑 #

上面的XAML触发器已经完全实现了间隙检测、按钮显示逻辑，不需要后台修改Margin的代码，也就不会触发布局重排。

可选适配 #

• 如果需要屏蔽第一个Item的左侧插入位、最后一个Item的右侧插入位，可以绑定索引加转换器控制命中区显隐
• 插入按钮的点击事件可以直接绑定Command，或者用路由事件在ListBox层面统一处理

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