如何在Silverlight中将画布绑定到项目集合

背景

我有一组我想在画布上画的东西。每个对象都有一个DateTime属性，该属性确定该对象在画布上沿x轴的位置。每个对象还具有一些其他属性，这些属性确定需要在画布上绘制的图像。我想实现的最重要的特性是，随着时间的流逝，这些表示对象的图像将沿x轴移动。换句话说，画布的右垂直边界将始终表示当前时间（例如DateTime.Now），集合中的对象需要更新其在画布上相对于该边界的位置。我对Silverlight非常陌生，因此我有很多问题，包括以下问题。此外，我还需要遵循MVVM框架

问题

我应该在XAML中使用什么来实现上述目标？我曾考虑过使用带有画布的ItemsControl作为面板，但我不确定如何做，甚至不确定这是否是最好的方法。任何实际的XAML代码都会很棒

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

• 已将对象添加到 收集或
• 从集合中移除的对象； 或
• 现有对象正在更改（例如，某些 属性已更改，因此需要 更改屏幕上显示的图像 收藏中的画布）；或
• 即使没有改变 如上所述，这些 对象将需要每小时移动一次 第二

抱歉，如果我对任何东西使用了错误的术语，因为我对Silverlight还是新手

---

谢谢。

如果您真的想使用MVVM和数据绑定，那么使用定义为画布的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中设置一个计时器，该计时器以刷新间隔运行，在presenter中只需处理计时器事件，即可迭代集合并将对象映射到（X，Y）位置，直接更新UI元素。

我知道这个问题有点老，但是你可以使用渲染变换——我正在做类似的事情

<ItemsControl ItemsSource="{Binding Notes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Width="{Binding W}" Height="{Binding H}" BorderBrush="Navy" BorderThickness="5" CornerRadius="10">
                <TextBlock Text="{Binding Text}"/>
                <Border.RenderTransform>
                    <TransformGroup>
                        <... elided ...>
                        <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我尝试了基于此的代码，它似乎在画布的左上角显示了所有项目。这里讨论了为什么不起作用：@Anthony你解决了这个问题了吗。我也处于类似的情况下，还不能找到解决方案。我已经从反序列化xml中获得了对象，现在我必须呈现UI，但我不知道如何。您能帮我一下吗。@Bobby您能告诉我如何在视图模型中绑定它吗？另请参阅“Silverlight 3-画布上矩形的数据绑定位置”：