Какова лучшая практика для создания настраиваемого графического отображения иерархических данных в WPF

Question

Я хотел бы иметь возможность отображать информацию о дереве сети (сохраненную в иерархической структуре данных), как в примере, показанном здесь:

На диаграммеУ меня есть несколько хостов (узлов верхнего уровня), один из которых считается «Мастер» и поэтому отображается иначе, чем другие узлы верхнего уровня.Каждый узел может иметь несколько подузлов (зондов).Линии между узлами показывают соединения, и если какое-либо из соединений выходит из строя, линия меняется, как показано между Hostname2 и Probe2.3.Любой выбранный узел (хост или зонд) также должен отображаться по-разному.

Я использую Prism / MVVM и пытаюсь сохранить код максимально чистым, но я не уверен в лучшем способевперед для отображения этих данных.

Я рассмотрел использование TreeView, но я не могу придумать чистый способ создания связей между узлами.Я также подумал о создании пользовательской панели, но я не уверен, что это наиболее уместно, и не знаю, с чего начать.Затем я подумал о создании пользовательского ItemsControl, так как было бы неплохо использовать DataTemplate и HierarchicalDataTemplate.Я мог бы также создать UserControl, который содержит холст и делать все в коде позади, но это не самый лучший способ.

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

Answer 1

Вам повезло, в прошлом году мне пришлось написать что-то очень похожее для моей нынешней работы.Я не могу дать вам никакого кода, но могу привести вас в правильном направлении.

Я нашел класс коллекции ориентированных графов, доступный здесь: http://msdn.microsoft.com/en-us/library/ms379574(v=vs.80).aspx#datastructures20_5_topic3.

Я также использую RadialПанель, которую я нашел на MSDN: http://msdn.microsoft.com/en-us/library/ms771363(v=VS.90).aspx. Это позволяет нескольким узлам рисовать в геометрической форме.Таким образом, если у вас есть 3 узла, они рисуют треугольник, 4 квадрата, 5 пятиугольников и т. Д. Чем больше у вас узлов, тем больше раскладка становится кругом.Это не будет работать для вас, но если вы перейдете по ссылке, она покажет вам, как создать пользовательскую панель с пользовательским макетом.Это может быть полезно.

Затем я использовал Canvas в качестве сцены, а RadialPanel - в качестве дочернего элемента Canvas.Каждый узел - это просто пользовательский элемент управления WPF с фоном эллипсов, который добавляется в RadialPanel.Затем коллекция ориентированных графов становится коллекцией моделей представлений узлов.Я храню там, где соединяется узел, почти как связанный список.Это позволяет мне легко проходить через мою коллекцию графиков без необходимости перебирать каждый узел, чтобы найти искомые узлы.

При рисовании используются некоторые приемы, чтобы убедиться в правильности макета, особенно при подключении.линий.См. Этот пост StackOverflow, который я сделал: WPF и C # - проблема с GeneralTransform и UIElement.TransformToVisual .Он имеет ссылку на изображение моего графа узлов, чтобы вы могли сравнить наши графики.

Это, очевидно, не все, но я думаю, что это хорошее начало.Для меня, я не мог переопределить какие-либо текущие элементы управления, чтобы сделать именно то, что мне нужно, поэтому я пошел трудным путем.Компромисс - большая работа в моделях кода и представления, но я также контролирую основные аспекты того, как это нарисовано.Мне это помогает.