如何将Canvas绑定到Silverlight中的项集合

Question

背景

我有一组想要在画布上绘制的对象.这些对象中的每一个都有一个DateTime属性,该属性确定该对象在画布上沿x轴的位置.每个对象还有一些其他属性,用于确定需要在画布上绘制的图像.我想要实现的最重要的功能是,随着时间的推移,第二个表示对象的这些图像将沿着x轴移动.换句话说,画布的右侧垂直边界将始终表示当前时间(例如DateTime.Now),并且集合中的对象需要相对于该边界更新它们在画布上的位置.我对Silverlight很新,因此我有很多问题,包括以下内容.另外,我还要求遵循MVVM框架.

问题

我应该在XAML中使用什么来实现上述目标？我想过使用带有Canvas的ItemsControl作为Panel,但我不知道该怎么做,甚至不知道它是否是最佳方式.任何实际的XAML代码都会很棒.

我应该如何将对象集合绑定到画布？如果是这样,我如何随着时间的推移沿着x轴移动它们？也就是说,我希望画布在以下情况下更新:

• 有一些对象被添加到集合中; 要么
• 从集合中删除的对象; 要么
• 现有对象在集合中发生变化(例如,某些属性发生了变化,因此需要更改画布上显示的图像); 要么
• 即使上面没有对集合进行任何更改,这些对象也需要每秒移动一次.

很抱歉,如果我使用了错误的术语,因为我还是Silverlight的新手.

谢谢.

Answer 1

如果您确实想使用 MVVM 和数据绑定，那么将 ItemsPanel定义为 Canvas 的 ItemsControl 可能就可以工作。将 ItemsControl.ItemsSource 绑定到 VM 中的 ObservableCollection。在 ItemsControl 的 ItemTemplate 中，将 UI 项元素的 Canvas.X 和 Canvas.Y 绑定到您的数据项，在两者之间使用 IValueConverter 来将 DateTime 映射到 X 坐标等...

像这样的东西：

<ItemsControl ItemsSource="{Binding Path=MyItemsInVM, Mode=OneWay}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas></Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Width="50" Height="50" Canvas.Left="{Binding Path=MyDateTimeProperty, Converter={StaticResource DateTimeToLeftOffsetConverter}}" Canvas.Top="100" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

另一种方法是使用模型-视图-呈现器模式。MVVM 并不是镇上唯一的演出。当您需要进行大量 UI 操作或使用 VSM 时，Presenter 可能更适合（尽管 Behaviour 也可以发挥重要作用）。

您可以在演示器中设置一个按刷新间隔运行的计时器，并且在演示器中只需处理计时器事件即可迭代集合并将对象映射到 (X,Y) 位置，从而直接更新 UI 元素。