将 ItemsControl 绑定到 Double 数组

Question

据我所知，以下应该有效，除非我遗漏了一些明显的东西。

<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="700">

  <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="1000" Stroke="Gray" Opacity="0.3" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

理想情况下，这应该在 ItemsControl 中显示几行。相反，它只显示一个。试了几个大大小小的值都没用。

有人可以指出我是否遗漏了什么吗？

Answer 1

默认情况下，ItemsControl 会将您的线条排列成垂直方向 StackPanel。这有效地将一条非常高的线堆叠在另一条之上，而不是像（我假设）您预期的那样平行绘制它们。

尝试将 ItemsControl 设置为使用 Canvas 布局：

<ItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
    <Canvas IsItemsHost="True" />
  </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

这将相对于 Canvas 的左上角定位每行，使用每行的各种 X 和 Y 属性来确定其有效位置：

仅供参考，如果你想更好地了解是发生了什么，你可以临时添加一些滚动条到ItemsControl 在进行上述更改之前。向下滚动时观察会发生什么 :).

<ItemsControl.Template>
  <ControlTemplate TargetType="ItemsControl">
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
      <ItemsPresenter />
    </ScrollViewer>
  </ControlTemplate>
</ItemsControl.Template>

将 ItemsControl 绑定到 Double 数组

Binding ItemsControl to a Double array

wpf

xaml

itemscontrol