Схема в Silverlight MVVM - соединительные фигуры - PullRequest
Новая
       38

Схема в Silverlight MVVM - соединительные фигуры

0 голосов
/ 27 марта 2010

у меня есть вопрос относительно шаблона MVVM в сценарии использования diagarm.

Пока у меня есть список предметов, которые являются моими формами. 

ObservableCollection<ItemsViewModels> Items;

и коллекция соединений предметов 

ObservableCollection<ConnectionViewModel>

Каждый ItemViewModel имеет идентификатор, а ConnectionViewModel имеет два идентификатора для соединения элементов.

Моя коллекция ItemsViewModel связана с Itemscontrol, который является макетом на Canvas.

С ElementMouseDragBehavior я могу перетаскивать свои Предметы. Теперь мой большой вопрос =) Как я могу визуализировать свои связи, чтобы я мог перемещать предметы, и предметы остаются связанными линией, либо прямой, либо безной.

Я не знаю, как абстрагировать это с помощью шаблона mvvm.

Спасибо за любую помощь ...

Ответы [ 3 ]

2 голосов
/ 04 мая 2010

Может ли это быть полезным для вас ?: SpiderWebControl для Silverlight

Источник предоставляется, и он перечисляет следующие функции

  • Добавление, удаление, переименование узлов
  • Перетаскивание узлов
  • CTRL + Перетащите для перетаскивания поддерева / ветви
  • CTRL + Перетащите на холст, чтобы перемещаться вокруг
  • Выбор и зависание с использованием VSM
  • Простой автоматический макет с анимацией

Может быть не совсем то, что вы хотели, но это может дать вам отправную точку.

John

0 голосов
/ 02 апреля 2011

Я недавно завершил нечто подобное, используя эту статью в качестве основы моей реализации:

http://www.codeproject.com/KB/WPF/BindingToElementPosition.aspx

Это довольно просто и хорошо работает для меня.

0 голосов
/ 29 марта 2010

Есть много способов сделать это. С Silverlight, тем не менее, есть немного больше проблем с макетом и рисованием соединительных линий. В WPF я бы подумал об использовании слоя adorner и рендеринга линий таким образом. Тем не менее, Silverlight не имеет прямого слоя для украшения, но его можно эмулировать (хотя в моем предложении ниже я предлагаю альтернативный подход к украшениям).

Вот один из способов, которым я мог бы рассмотреть решение проблемы и ее решение.

  1. Похоже, что MouseDragElementBehavior не имеет каких-либо событий, которые бы указывали, когда элемент перемещается или перемещается в новое местоположение.
    • Также появляются некоторые серьезные ошибки перетаскивания, когда перетаскиваемый объект находится внутри холста, поэтому я не уверен, что буду его использовать.
  2. Я бы создал собственную перетаскиваемую поверхность (получено из Панель ). Вам потребуется реализовать собственную обработку мыши и пользовательскую панель с переопределением MeasureOverride и ArrangeLayout. См. this для получения дополнительной информации о макете в Silverlight.
    • Имитация холста, например, процесса перетаскивания, относительно проста, поскольку в действительности не так уж много проблем с измерением или расположением. Вам нужно будет создать либо прикрепленные свойства с расположением фигуры, либо добавить местоположение к объекту фигуры. Я бы, наверное, согласился с последним, если имеет смысл хранить эти значения непосредственно в ваших объектах формы.
    • , чтобы сделать вещи перетаскиваемыми, вам нужно прикрепить муссоун / вверх фигуры, захватить мышь и выполнить простую логику перетаскивания.
    • При необходимости добавьте событие, когда объекты перетаскиваются и завершены перетаскиванием.
    • когда элементы управления удаляются с панели, убедитесь, что вы связали все события, которые вы прикрепили, чтобы они освобождались во время GC
  3. Создайте вторую пользовательскую панель (или пользовательский элемент управления). Эта панель будет размещена под первой панелью перетаскивания. Назначение этой панели - привязка к объектам подключения (конечно, также потребуется прямой или косвенный доступ к исходным позициям объектов).
    • Если вы сделаете панель панелью, вы можете добавить линии для соединений и местоположений объектов. Вам нужно будет подключиться либо к событию, которое я упомянул выше, либо напрямую к событию изменения свойства X, Y на фигуре, чтобы можно было обновлять линейные объекты при перемещении фигур.
    • или Вы можете использовать usercontrol и / или writeablebitmap для рисования линий. Я бы посоветовал взглянуть на простые классы расширения WriteableBitmapEx в Codeplex, поскольку он включает в себя простой алгоритм рисования линий. Вам нужно будет аннулировать растровое изображение и перерисовывать соединения каждый раз, когда обновляются фигуры.
...