Как связать Canvas с коллекцией предметов в Silverlight

Question

Фон

У меня есть коллекция объектов, которые я хочу нарисовать на холсте. Каждый из этих объектов имеет свойство DateTime, которое определяет положение этого объекта вдоль оси x на холсте. Каждый объект также имеет некоторые другие свойства, которые определяют изображение, которое необходимо нарисовать на холсте. Самая важная функция, которую я хочу реализовать, заключается в том, что с течением времени эти изображения, представляющие объекты, будут перемещаться вдоль оси X. Другими словами, правая вертикальная граница холста всегда будет представлять текущее время (например, DateTime.Now), и объекты в коллекции должны будут обновить свое положение на холсте относительно этой границы. Я очень новичок в Silverlight и, следовательно, у меня довольно много вопросов, включая следующие. Кроме того, у меня также есть требование следовать структуре MVVM.

Вопросы

Что я должен использовать в XAML для достижения вышеуказанного? Я думал об использовании ItemsControl с Canvas в качестве панели, но я не уверен, как это сделать, и даже лучше ли это. Любой фактический код XAML был бы хорош.

Как мне связать коллекцию объектов с холстом? И если так, как я могу перемещать их вдоль оси X с течением времени? То есть я бы хотел, чтобы холст обновлялся всякий раз, когда:

• есть объекты, добавленные в коллекция; или
• объекты, удаленные из коллекции; или
• изменение существующего объекта (например, некоторые свойство изменилось и, следовательно, необходимо изменить изображение, которое отображается на холст) в коллекции; или
• , даже если в Коллекция, как упоминалось выше, эти объекты должны будут двигаться каждый второй.

Извините, если я использовал неправильные термины для чего-либо, поскольку я все еще новичок в Silverlight.

Спасибо.

Answer 1

Я знаю, что этот вопрос немного старый, но вы можете просто использовать преобразование рендера - я делаю нечто подобное;

<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>

Answer 2

Если вы действительно хотите использовать MVVM и привязку данных, то ItemsControl с ItemsPanel , определенным как Canvas, может просто работать. Свяжите ItemsControl.ItemsSource с ObservableCollection в вашей виртуальной машине. В своем ItemTemplate для ItemsControl, свяжите 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>

Другой подход заключается в использовании шаблона Model-View-Presenter. MVVM - не единственное шоу в городе. Если вам нужно много манипулировать пользовательским интерфейсом или работать с VSM, тогда лучше подойдет Presenter (хотя поведение также может играть важную роль).

Вы можете настроить таймер в презентаторе, который будет работать с интервалом обновления, а в презентере просто обработать событие таймера, чтобы выполнить итерацию по коллекции и сопоставить объекты с позициями (X, Y), непосредственно обновляя элементы пользовательского интерфейса.