将ItemsControl绑定到Double数组

时间:2018-01-22 14:13:07

标签: wpf xaml itemscontrol

除非我遗漏了一些明显的东西,否则以下 应该可以正常工作。

<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中显示几行。相反,它只显示一个。我尝试了几个大小不一的值,但无济于事。

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

1 个答案:

答案 0 :(得分:2)

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

尝试将ItemsControl设置为使用Canvas代替布局:

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

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

Screenshot of results

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

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