Я пишу код, чтобы представить пользователю упрощенную сетевую карту. В любой момент времени карта ориентирована на определенный элемент ... скажем, на маршрутизатор или сервер. На основе сфокусированного элемента другие сетевые объекты группируются в наборы (то есть подсети или домены) и затем визуализируются вокруг сфокусированного элемента. Линии будут представлять соединения, а группы будут визуально сгруппированы внутри прямоугольника или эллипса.
Панорамирование и масштабирование являются обязательными функциями.
Элемент может быть выбран для отображения дополнительной информации в окне стиля «свойства». Можно также дважды щелкнуть элемент, чтобы перефокусировать всю карту сети на этом элементе. В этот момент вся карта будет пересчитана.
Я использую MVVM без каких-либо рамок, пока. Примите логику для группировки элементов и определения того, что должно быть показано или нет, все на месте.
Я ищу лучший способ приблизиться к макету пользовательского интерфейса. Пока что мне известны следующие варианты:
- Использование холста для макета (внутри ScrollViewer для обработки панорамирования). Пусть моя ViewModel использует тип класса Layout Manager, который будет обрабатывать назначение всех свойств макета (Top, Left и т. Д.). Привязать мой набор отображаемых элементов к ItemsControl и использовать шаблоны данных для обработки фактического рендеринга.
Недостатки этого подхода:
- Очень ручная компоновка с моей стороны. Много расчета.
- Мне приходится вручную выбирать предметы.
- Вычисление соединительных линий выполняется вручную.
Плюсы этого подхода:
- Я могу нарисовать дополнительные линии между дочерними подсетями, если необходимо (вручную).
- Дополнительные LayoutManagers могут быть добавлены позже, чтобы отобразить изображение по-другому.
- Вероятно, это можно заключить в какой-то элемент управления GraphLayout для повторного использования.
- Представьте сфокусированный элемент в центре дисплея, а затем используйте PathListBox для размещения дополнительных элементов. Пусть моя ViewModel предоставит простой список объектов для рисования и свяжет их с PathListBox. Переопределите шаблон ListBoxItem, чтобы также создать геометрию линии от границ сфокусированного элемента (сложно) до связанного элемента. Используйте DataTemplates для обработки случая, когда привязываемый элемент является подсетью, и в этом случае мы будем использовать другой PathListBox в шаблоне для отображения элементов внутри подсети.
Недостатки этого подхода:
- Синхронизация выбранного элемента между несколькими `PathListBox`. Одновременно может быть выбран только один элемент на всем графике, но каждый дочерний PathListBox поддерживает свой собственный выбор. Кроме того, подсети не могут быть выбраны, но могут быть выбраны без дополнительной работы.
- Рисование соединительных линий будет немного хитрым в шаблоне ListBoxItem, так как мне нужно знать правильную сторону выделенного элемента для подключения.
Плюсы этого подхода:
- Я не вмешиваюсь в макет, больше.
Мне нужны советы или мысли от тех, кто сталкивался с подобными проблемами или у которых больше опыта работы с WPF, чем у меня. Я использую WPF 4, поэтому любые новые приемы законны и приветствуются.