WPF中ItemsControl绑定Double数组仅显示单条线条问题

你遇到的问题根源在于ItemsControl默认的布局容器，导致所有线条都重叠在一起，看起来只显示了一条。

为什么会这样？ #

默认情况下，ItemsControl使用StackPanel作为ItemsPanel（布局容器），它会为每个Item创建独立的容器（比如ContentPresenter），并将这些容器堆叠排列。你的Line元素的坐标是相对于自己所在的容器，而不是全局的画布——这就意味着所有线条都被限制在各自的小容器里，最终重叠在一起，视觉上就只看到一条线。

另外，你的Line的Y2设为1000，但ItemsControl的DesignHeight只有200，这会导致线条被截断，不过这是次要问题。

修复后的代码 #

只需要把ItemsControl的ItemsPanel改成Canvas，让所有线条都绘制在同一个画布上，这样它们的坐标就会相对于整个Canvas，就能看到所有线条了：

<ItemsControl x:Class="VGuidelines" 
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:sys="clr-namespace:System;assembly=mscorlib" 
              mc:Ignorable="d" 
              d:DesignHeight="200" 
              d:DesignWidth="1400"> <!-- 加宽设计宽度以容纳最大的X值1301 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas /> <!-- 改用Canvas作为布局容器 -->
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemsSource>
        <x:Array Type="sys:Double">
            <sys:Double>5</sys:Double>
            <sys:Double>121.0</sys:Double>
            <sys:Double>1301</sys:Double>
            <sys:Double>275</sys:Double>
            <sys:Double>322</sys:Double>
            <sys:Double>203</sys:Double>
            <sys:Double>223</sys:Double>
            <sys:Double>230</sys:Double>
            <sys:Double>37.5</sys:Double>
            <sys:Double>422</sys:Double>
        </x:Array>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Line X1="{Binding}" X2="{Binding}" Y1="0" Y2="200" Stroke="Gray" Opacity="0.3" /> <!-- 把Y2改成200适配设计高度 -->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键改动说明 #

• 将ItemsPanel替换为Canvas：所有线条都在同一个画布上绘制，坐标相对于整个Canvas，不会再被各自的容器限制。
• 调整DesignWidth为1400：确保能容纳数组中最大的X值1301，避免线条被截断。
• 修改Line的Y2为200：和ItemsControl的DesignHeight匹配，让线条完整显示。

这样修改后，你就能看到所有不同X位置的灰色竖线了。

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