WPF中ItemsControl创建矩形出现重叠与间距不一致问题

你的问题核心出在布局层级混乱和容器定位错误上，和转换器无关，下面是具体问题点和修复步骤：

关键问题点 #

1. ItemTemplate嵌套多余Canvas：ItemsControl的ItemsPanel已经是Canvas了，每个Item的容器（ContentPresenter）会直接放在这个Canvas里，你在ItemTemplate里再套一层Canvas，会导致布局计算层级混乱，定位逻辑被干扰。
2. ItemsControl全局定位错误：你给ItemsControl本身设置了Canvas.Right="0"和Canvas.Bottom="0"，这会把所有Item的容器（ContentPresenter）都强制定位到Canvas的右下角，直接导致所有矩形重叠在一起。
3. 冗余布局属性干扰：Rectangle上设置的HorizontalAlignment="Left"和VerticalAlignment="Top"在Canvas布局中完全无效，反而可能触发不必要的布局计算。

修复后的代码 #

<ItemsControl ItemsSource="{Binding HighLightRegions}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Height="{Binding ActualHeight, ElementName=myRectangle}"
                    Width="{Binding ActualWidth, ElementName=myRectangle}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 移除错误的全局Canvas定位Setter -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <!-- 给每个Item容器设置Canvas.Left，位置由数据转换得到 -->
            <Setter Property="Canvas.Left">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}">
                        <Binding Path="ActualWidth" ElementName="myRectangle"/>
                        <Binding Path="Location.X"/>
                        <Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
                        <Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            <!-- 固定容器的垂直位置，因为所有矩形高度和myRectangle一致 -->
            <Setter Property="Canvas.Top" Value="0"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="plotLineViewModel:HighLightRectType">
            <!-- 直接用Rectangle作为根元素，去掉嵌套Canvas -->
            <Rectangle Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.FrameOverlayColor}"
                       Opacity=".6"
                       Stroke="{StaticResource MyChartPlotBackgroundBrush}"
                       Height="{Binding ActualHeight, ElementName=myRectangle}">
                <Rectangle.Width>
                    <MultiBinding Converter="{StaticResource ChartViewXCordinateConverter}">
                        <Binding Path="ActualWidth" ElementName="myRectangle"/>
                        <Binding Path="Width"/>
                        <Binding Path="DataContext.XAxisMax" ElementName="XPosition"/>
                        <Binding Path="DataContext.XAxisMin" ElementName="XPosition"/>
                    </MultiBinding>
                </Rectangle.Width>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

修复说明 #

• 把Canvas.Left的绑定从Rectangle移到ItemContainerStyle中，确保每个Item的容器（ContentPresenter）在ItemsPanel的Canvas上正确定位，这才是Canvas布局的正确用法。
• 移除了ItemTemplate中的内层Canvas，减少布局层级，避免定位逻辑冲突。
• 删除了ItemsControl.Style中错误的全局定位设置，让每个Item的位置由自身数据决定。
• 去掉了Rectangle上无效的HorizontalAlignment和VerticalAlignment属性，精简布局逻辑。

这样修改后，每个矩形会根据数据正确计算位置和宽度，不会再出现重叠或间距异常的问题。

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